深入理解 float 属性

为什么要浮动

div 元素属于块元素，块元素默认宽度是占满父级的，给父元素设置了宽度后还是会单独占一行。

在HTML设计之初，没有几个“容器类标签”既能设置宽高，又能和别的元素同处一行。块元素能够设置宽高但是默认独占一行，行元素默认是内容撑开宽高的，虽然某个行元素能够和其他行元素处于同一行，但是并不能够设置宽高。

如果希望div或其他元素“既能够设置宽高，又能够跟其他元素处于同一行”，就需要使用到浮动。

浮动的影响

设置浮动的元素会“脱离文档流”。浮动的元素，并不属于文档中的普通流，元素漂浮于普通流之上，像浮云一样，但能够左右浮动。
由于浮动的这种特性，会造成高度塌陷。
浮动元素会对兄弟元素布局产生影响，但是仅针对它后面的兄弟级元素，并不会对前面的布局造成影响。

清除浮动

清除浮动指清除掉上述浮动元素造成的影响

浮动——— clear 属性
规定元素的哪一侧不允许存在其他浮动元素。
需要注意两点:
(1) 并非浮动元素的所有兄弟级元素都需要清除浮动，只需要针对浮动元素的下一个兄弟级元素设置清除浮动，后面所有元素的布局都会恢复。
(2)如果希望在第二个div(浮动元素)与第三个div(清除浮动的兄弟元素)之间有一定间距，为浮动元素后的下一个兄弟级元素设置顶部外边距时会失效(与上方空白区叠加)，此时，可以为浮动元素设置下边距。
空标签清除浮动
就是在浮动元素后加一个没有内容的空标签并设置 clear: both; 属性
br 标签清除浮动
在需要清除浮动的地方加上 <brclear=”all”>
为父元素设置浮动
利用after伪元素清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            border: 1px solid #000000;
        }
        .con{
            float: left;
            height: 200px;
            background: #cccccc;
        }
        .wrap:after{
            content: '\200B';
            clear: both;
            display: block;
            height: 0;
        }
        .wrap{
            *zoom:1;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="con">第一个div</div>
    
</div>
</body>
</html>