look at the code
MDN:
:MDN,
.box2?MDN: how floating elements are positioned
CSS():" , "
float none , display block ,div?
look at the code
MDN:
:MDN,
.box2?MDN: how floating elements are positioned
CSS():" , "
float none , display block ,div?but why did the .box2 element move up?
Box2 does not move up because of its float. After .box1 is out of the document stream, .box2 is on the first line.
Whenand float is not none, the display calculated value of the element is block, so the two div should not be on the same line?
Block-level elements occupy a row only when there is a normal stream.
or until you hit the border of another floating element ? breaking away from the document stream ? Hello, the layout principle goes like this:
first, it is arranged from top to bottom by block, so div1 is on the first line, div2 is on the second line, and it is placed vertically. This is the basic flow.
secondly, if there is a floating flow, the floating flow is arranged before the basic flow, that is, it occupies the top part of the page
again, the floating flow is discharged horizontally, for example, if the floating flow flows to the left, the first floating element is arranged on the far left. On the second left, if the line is full, you have to change lines. The whole floating stream is similar to the composition we usually write on paper, from left to right and from top to bottom
again, the original width of div is 100%, but the width of float is automatically reduced to the minimum required width
above for reference
CSS detaches from the document stream, that is, the element is removed from the normal layout, and other boxes are positioned as if the element out of the document stream does not exist.
Note that when you use float to detach from the document stream, other boxes will ignore this element, but the text in other boxes will still make room for this element and surround it.
for elements that use position:absolute to detach from the document stream, the text in other boxes and other boxes will ignore it.
look at the example:
two floating div, the third div without floating ignores these two elements that leave the document stream, but the text in div does not ignore
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
padding: 0;
margin: 0;
background-color: rgba(0, 0, 0, 0.1)
}
.div-fl {
float: left;
width: 50px;
height: 50px
}
.div1 {
background: rgba(241, 110, 9, 0.8);
}
.div2 {
background: -sharp0000ffa1;
}
.div3 {
width: 500px;
height: 20px;
background: green;
}
.div-pos-ab {
width: 500px;
height: 20px;
background: -sharpffff0075;
position: absolute;
color: red;
}
</style>
</head>
<body>
<div class=" div-fl div1"></div>
<div class="div-fl div2"></div>
<div class="div3">this a div </div>
<span>this is some text,this is some text,this is some text,this is some text</span>
<div class="div-pos-ab">this is a absolute dom</div>
<span>this is some text,this is some text,this is some text,this is some text,this is some text,this is some text</span>
</body>
</html>
both div are separated from the document flow, which means that the two div are rearranged according to the upper-left origin of the page. You can understand that if the second layer
is separated from the document flow, both div will be in the first line and float to the left, and both div will translate to the left or right until they hit the frame of the container, or encounter another floating element
Previous: How to use ngFor and ng-select together
Next: [solved] how to achieve the following effects in an elegant, pure CSS way
the psd given by the artist is 1080 to 1920. How to convert width, height and font when making a page? ...
question: after downloading the project in the way of Alibaba iconfont, introduce the iconfont.css file (other font files are in the same folder). Neither unicode nor font class can be displayed in the project, but other browsers display normally. Is it ...
how to ensure that the design draft is restored under different resolution screens (a similar background management project on the PC side) learn the following ways: viewport forces zooming (which may blur the display) @ media (responsive, it se...
how can this trapezoidal typesetting be realized in the figure above? ...
The redrawing cost of table is higher than that of div elements, so modern layouts have abandoned table layouts unless tables are needed. question: so is this redrawing the same cost as using a table layout directly? .father{ display:table; } .fat...
in the project I am working on, the design draft given by ui is based on a fixed 1440px resolution. If it is greater or less than this resolution, such as 1200px or 1800px, it will cause the page layout to be ugly. how do you solve this problem? ...
the usual file upload is to select a file in the system pop-up window, then click the open button to upload the file directly, now we have a requirement that after the operation in the system pop-up window is completed, the upload will not be carr...
for example, if I press F12 using chrome, I can copy the html code in the navigation bar of codeshelper, but how can I find the corresponding css code? ...
console.log(typeof eleInner); string, console.log(eleInner instanceof String);false <!DOCTYPE html> <html> <head> <title>< title> < head> <body> HelloWorld <script type="text javascript"...
what is the principle of picture upload and what needs to be sent to the background? Xiaobai asks for guidance. ...
reinstalled the system once, then reported this error, and could not open ....
CSSHTML ...
...
40px,<a><img>,<a><img> <a>21px? : JSBIN:https: jsbin.com fokuyamijo edit?html,css,output <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin< title> <sty...
: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin< title> <style type="text css"> *{ margin:0 ; padding: 0; } < style> < hea...