给元素设置浮动是开发中比较常见的,但是设置浮动后,会导致元素脱离正常的文档流,影响页面的布局,如果不对元素进行清除浮动的处理,会对页面布局造成
很多影响。
在什么情况下需要清除浮动呢?
当父元素没有设置宽度或者高度的时,又需要子元素撑开父元素的时候使用清除浮动。
不清除浮动会有什么影响?
1.父元素在不设置宽高的情况下,子元素设置了浮动,会造成父元素的宽高无法被撑开
2.后续页面布局造成影响
3.父级设置的一些背景不能正确显示,因为父级没有宽高
基础布局html+css
<div class="Box"> <div class="boxItem1"></div> <div class="boxItem2"></div> </div> <div class="Box2"></div>
<style> .boxItem1{ width: 100px; height: 100px; background: red; float: left; } .boxItem2{ width: 100px; height: 100px; background: red; float: left; } .Box2{ width: 100px; height: 100px; background: black; float: left; } </style>
提供的几种清除浮动方法:
方法1:在设置浮动的最后一个元素后面加上一个空标签,设置css为clear: both;即可
方法2:给浮动元素的父级设置css样式overflow为
after来清除样式
.Box:after{
content:"";
display: block;
clear:both;
}