First of all, let’s first understand that
there are three methods in the standard stream css to make an element out of the standard document stream:
1) Floating
2) Absolute positioning
3) Fixed positioning
standard stream is also called document stream, which means that it does not rely on any special The arrangement rules of the css arrangement rules of the elements.
The characteristics of the standard stream:
-
Blank folding phenomenon: For example, if we want no gaps between img tags, they must be tightly connected:
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" /> -
The content is uneven and the bottom is aligned:
-
Auto-wrap
float is the most used attribute for layout in CSS.
Two elements are side by side, and the code is attached:
box1{ float: left; width: 300px; height: 400px; background-color: yellowgreen; } .box2{ float: left; width: 400px; height: 400px; background-color: skyblue; }
If you want to learn Floating well, you must know three properties.
1. Floating elements are off-standard
Proof 1:
.box1{ float: left; width: 100px; height: 100px; background-color: yellowgreen; } .box2{ width: 300px; height: 300px; /* float: left; * / background-color: skyblue; }
Box1 is separated from the document flow and overlaid on box2.
Proof 2:
A span tag does not need to be converted into a block-level element to set the width and height. So one thing can be proved, that is, all tags no longer distinguish between lines and blocks. In other words, once an element floats, it will be able to be side-by-side, and the width and height can be set. Whether it was originally a div or a span.
span{ float: left; width: 200px; height: 200px; background-color: orange; } 2. Floating elements stick to each other If there is enough space, then it will lean against box2 brother. If there is not enough space, then it will lean on the box 1 eldest brother. If you don't have enough space to lean against box 1, go to the left wall yourself. 3. Floating elements have a "character enclosing" effect . 4. Floating elements shrink . If the width is not set for a floating element, it will automatically shrink to the width of the text (this is very similar to inline elements).
.box1{
float: left;
/* width: 300px;
height: 400px; 没有设置宽高度*/
background-color: yellowgreen;
}
.box2{
float: left;
width: 100px;
height: 100px;
background-color: skyblue;
}
.box3{
float: left;
width: 300px;
height: 300px;
background-color: darkblue;
}
Next is the key to floating: Clear floating:
There are now two divs, and there are no attributes on the divs. There are li in each div, and these li are all floating.
<div class="main">
<div class="box1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>vue</li>
</ul>
</div>
<div class="box2">
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>物理</li>
</ul>
</div>
</div>
We thought that these li would be divided into two rows, but the first li in the second group was attached to the last li in the first group.
The reason is that the parent element does not have a height set and cannot give a container to the floating children.
Method one to clear the float: Set the height for the father.
As long as the float is in a box with a height, then the float will not affect the subsequent floating elements. So it is to remove the impact of floating.
Clear floating method two: clear:both;
clear:both; is the most common method.
In web page production, height rarely appears. Because if you write down the height, the page will be messed up when there is too much content. Will be scolded to death by back-end personnel.
Someone asked whether it is possible to clear the float without writing the height? Let the floats not affect each other?
.main ul li{
float: left;
background: red;
list-style: none;
}
.main div{
/* height: 50px; */
border: 1px solid salmon;
}
.box2{
clear: both;
margin-top: 5px;
}
A clear: both; style is added to box2, the effect is as follows:
This method has a very big and fatal problem, the margin fails.
Clear Floating Three: Partition Wall Method
<div class="main">
<div class="box1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>vue</li>
</ul>
</div>
<divc class="h20"></div>
<div class="box2">
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>物理</li>
</ul>
</div>
</div>
Add a div in the middle to open it as the distance between the two divs, and clear the float.
.h20{
height: 20px;
clear: both;
}
In recent years, there has been an internal wall method
<div class="box1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>vue</li>
<div class="clear"></div>
</ul>
</div>
.clear{
clear: both;
}
It is to add another class below the floated element to clear the float. In this way, the parent strikethrough format can also be supported by the son, and the impact of floating will also be eliminated. (The one I use the most)
Clear float three: overflow: hidden;
overflow: hidden; originally meant overflow hidden.
It can also be used to solve the problem of a son whose father cannot be floated by himself, to hold up the height. However, as long as you add overflow: hidden; to the floating element father, then the father can be pushed higher by the son. This is a home remedy.
This phenomenon cannot be explained, but it is a small remedy of the browser. And, overflow: hidden; can make margin take effect.