清除浮动
css 2018当未设置容器高度时,同时容器内有浮动的元素时,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响布局的现象,这个现象叫浮动溢出。为了防止这种现象出现而进行的 CSS 处理,就叫清除浮动。
例子
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
.container {
border: solid 1px black;
}
.left{
width: 30px;
height: 20px;
background-color: ##DDA0DD;
float: left;
}
.right {
width: 60px;
height: 40px;
background-color: #14CC8D;
float: right;
}
如上所示:容器没有包围浮动元素,清除浮动后可以参考下面链接。
清除浮动的方法
-
使用 clear: both 的空元素
在浮动元素后使用一个空元素如<div style={ clear:both; }></div>
即可清理浮动。
注:不推荐采用。需要添加无语义的html元素,代码不够优雅,后期不易维护。 -
使用 overflow: hidden 属性
给容器添加overflow:hidden
可以清除浮动。
注:不推荐采用。离开容器所在的区域会被隐藏 -
使用 :after 伪元素
给容器添加一个 :after 伪元素,实现元素末尾添加一个看不见的块。
注:推荐采用。注意设置 :after 属性值.container:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
总结
推荐使用 :after
伪元素方法清除浮动,文档结构清晰。