一、浮动布局注意点
- 先用标准流的父元素排列上下位置,之后内部子元素使用浮动排列左右位置;
- 一个元素浮动了,理论上其他兄弟元素也要浮动;都加浮动才会在同一行显示;
- 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
二、清除浮动
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.清除浮动策略:闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。