清浮四种方法

时间：2023-03-30 18:20:56 CSS

清浮四种方法Case解释代码.container{width:500px;背景色：黑色；}.left{宽度：200px；高度：300px；背景色：红色；向左飘浮;}.right{宽度：200px；高度：200px；背景色：绿色；向左飘浮;}.footer{宽度：600px；高度：50px；>大毛

两毛

三毛

可以看到运行结果，左右无标记不占空间，footer元素与之重叠，页脚内容‘三毛’被挤出，可以看出浮动元素不占空间而是占内容。1.附加标签法（W3C推荐）在最后的浮动元素上添加一个带有clear:both属性的块级标签。.clear{clear:两者;}大毛二毛三毛跑步result2.Parentoverflow:hidden添加overflow:hidden到浮动元素的父框。.container{溢出：隐藏；宽度：500px；背景色：黑色；}运行结果3.parentafter伪元素在parentbox中添加一个指定属性的伪元素，如下。clearfix:after{visibility:hidden;明确：两者；显示：块；内容：””;height:0}.clearfix{*zoom:1;}运行结果4.Parent为具有双层伪类元素的父框添加如下属性.clearfix:after,.clearfix::before{content:"";显示：表格；}.clearfix:after{clear:both;}.clearfix{*缩放：1；}清除浮动的本质观察四种方法的运行结果可以看出，清除浮动的本质是在父框上增加一个适合子框的高度。如果父box有高度，不会影响后续的标准流Box。

上一篇：PostCSS（一）：理解PostCSS

下一篇：20170917前端开发周报：JavaScript函数式编程、作用域与闭包

清浮四种方法相关文章