清除浮动的三种方法

原创 蔡雅宁 随笔 前端基础 638阅读 2017-08-27 16:20:48 举报

float是CSS样式中的定位属性,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档里中。
html文档流:(自上而下 从左到右)自窗体自上而下分成一行一行,并在每行按照从左到右的顺序排列元素

使用浮动,脱离文档流[/color]
html 代码

[color=#ff0000]清除浮动
1、在浮动元素后增加一个宽高为0的div来清除浮动
html 代码

2、伪元素::after
使用伪元素::after来清除浮动,在浮动元素外添加一个父元素在父元素的样式添加 父元素::after{content:"";display:block;clear:both;}
html 代码

3、overflow:hidden
使用overflow:hidden;来清除浮动,在浮动元素外添加一个父元素在父元素的样式添加 父元素{overflow:hidden;}
html 代码

评论 ( 1 )
最新评论