1. Understanding floating
Any element can be floated, whether it is a block-level element (similar to div, ul) or an inline element, any element with the name of float will be automatically set as a block-level element, which has the characteristics of a block-level element. For example, you can set the width and height, and you can also set the inner margin.
When the element object is set to float, it will no longer occupy a line by itself. A slider can move left or right until its outer edge touches its containing box or the border of another slider.
But there is another point that is more important. Float is used for layout, which can easily achieve the effect of being left or right, but after using up float, be sure to clear the float, otherwise it is likely to cause the float to collapse.
2. So what is floating collapse?
We first need to know that the height of the parent element is expanded by the child element by default in the floating layout. When the child element floats, it will completely break away from the document flow. If the child element breaks away from the document flow, it will not be able to expand the height of the parent element, resulting in the loss of the height of the parent element. After the height is lost, the elements below it will automatically move up. , causing the page to clutter up.
Give an example question
If a parent element contains several child elements, at this time, float (float: left) is set for these child elements, then the height of the parent element will be 0.
Like the picture below:
[no floating]
[after floating]
Like the picture above, because of the addition of floating, the picture is separated from the document flow, and the div cannot wrap the img. At the same time, the img is added with floating, so that the div cannot be supported by the img, causing the height of the div to collapse, which is floating collapse.
Solution to floating collapse
Clear floating, the following are 4 ways to clear floating:
Add a div with a height of 0, a width of 0, and a clear:both style after the parent element of the float element.
<div style="clear: both;"></div>Add a hidden element to the parent element using the float element.
It is not recommended to use. After adding, the text or pictures will be hidden.
style="overflow: hidden;"Sets the height of the parent element using the float element.
It is not recommended to use, because it is relatively fixed and it is more limited if you need to add elements later.
style="height: 320px;"Use the after pseudo object to clear the float.
It is recommended as the first choice, which is more convenient and solves the above problems at the same time.
.父级名称或标签::after{
/* after默认是行内元素，需要修改为块元素 */
content: ' '; //在clear类后面添加内容为空
display: block; //把添加的内容转化为块元素
clear: both; //清除这个元素两边的浮动
}Code example:
<!-- HTML部分，添加 clearfix -->
<div class="container clearfix">
<div class="item">1</div>
<div class="item">2</div>
</div>/* CSS部分 */
.clearfix:after {
content: " ";
display: block;
clear: both;
}You also run into issues with overlapping margins
3. So what is margin overlap?
Example question:
The container contains an item sub-element, the code is as follows
<div class="container">
<div class="item">
item
</div>
</div>
此时，我给 item 加了 margin-top: 30px ，本来这时候我期待的结果是，item 块本身应该距离 container 青色区域的上边界 30px 。同时一个副作用是青色区域应该拉高 30px 。但是实际上得到的却是下面的效果：
造成这个的原因是，父子元素的 margin-top 是会重叠的，即使是像上面的情况中，父元素 container 自身 margin-top 为 0 的情况下也一样。这样造成的一个现象就是父元素“包不住”子元素的 margin-top ，溢出了。类似的问题也会发生在 margin-bottom 身上。
外边距重叠解决办法
要给 container 添加 clearfix。
<!-- HTML部分 -->
<div class="container clearfix">
<div class="item"> item </div>
</div>/* CSS部分 */
.clearfix::before, //意为在类名为clearfix的最后面和前面添加下面的内容
.clearfix::after{
content: '';
display: table; //注意，display: table 换成 dispaly: block 是不行的。
clear: both;
}