文章目录
一、浮动布局注意点
- 先用标准流的父元素排列上下位置，之后内部子元素使用浮动排列左右位置；
- 一个元素浮动了，理论上其他兄弟元素也要浮动；都加浮动才会在同一行显示；
- 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
二、清除浮动
1.为什么要清除浮动？
由于父盒子在很多情况下，由于子元素的不确定性，不方便直接给出高度，但子元素浮动不占有标准流盒子，就会影响到下面的标准流盒子；即由于浮动元素不再占有原文档流的位置，所以它会对后面的元素排版产生影响。
如果父元素本身有高度，则不需要清除浮动；
清除浮动之后，父级会根据子盒子自动检测高度，父级元素有了高度，则不会影响下面的标准流。
举个例子，如果我们想在多个浮动子元素下方添加footer盒子，由于上方浮动元素不占用原文档流的位置，即会对下方footer盒子排版产生影响。代码如下：
<style>
.box1 {
height: 200px;
width: 200px;
background-color: blue;
float: left;
}
.box2 {
height: 200px;
width: 200px;
background-color: red;
float: left;
}
.footer {
height: 200px;
background-color: green;
}
</style>
<body>
<div class="box">
<div class="box1">box1 </div>
<div class="box2">box2</div>
</div>
<div class="footer">footer</div>
</body>
效果图如下所示：
footer元素与浮动元素重叠且在同一行；因此我们需要清除浮动。
2.清除浮动语法
语法：
选择器 {
clear: 属性值（left、right、both）；
}
3.清除浮动方法
.clear {
clear: both;
}
在浮动元素末尾添加一个空标签，如下所示clear元素，新添加的元素必须为块级元素，不能是行内元素。
<body>
<div class="box">
<div class="box1">box1 </div>
<div class="box2">box2</div>
<div class="clear"></div>
</div>
<div class="footer">footer</div>
</body>
效果图如下：
该方法通俗易懂，书写简单，添加许多无意义的标签，结构化较差。
给父元素添加overflow元素，将其属性值设置为hidden、auto或者scroll。
.box {
overflow: hidden;
}
效果图如下：
：after方式是额外标签法的升级版.
如下所示，为父元素添加clearfix类，即可清除浮动。
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
<body>
<div class="box clearfix">
<div class="box1">box1 </div>
<div class="box2">box2</div>
</div>
<div class="footer">footer</div>
</body>
效果如下所示：
为父元素添加以下样式：
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
<body>
<div class="box clearfix">
<div class="box1">box1 </div>
<div class="box2">box2</div>
</div>
<div class="footer">footer</div>
</body>
总结
1.清除浮动的本质：清除浮动元素脱离标准流造成的影响。
2.清除浮动策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。