清除浮动流方式

1.清除浮动的第一种方式

给前面一个父元素设置高度

注意点:在实际开发中, 我们能不写高度就不写高度, 所以这种方式用得很少

2.清除浮动的第二种方式

给后面的盒子添加clear属性

CSS clear属性

取值:left   告诉浏览器不要去找前面的左浮动元素

right    告诉浏览器不要去找前面的右浮动元素

both    不要去找前面的左浮动和有浮动元素

none    默认取值,按照浮动元素的排序规则来排序

注意:使用这种清除浮动方式会使margin属性会失效

3.清除浮动的第三种方式

隔墙法:(在实际开发中不常用)

1)、外墙法:在2个盒子之间添加一个额外的块级元素,给这个额外的块级元素添加clear: both;属性

注意点:外墙法它可以让第二个和i子使用margin-top属性

外墙法不可以让第一个盒子使用margin-bottom属性

这个额外的盒子可以设置多个类名 第一个类名可以设置clear属性 第二个类名可以设置高度

2)、内墙法:在第一个盒子中所有子元素最后添加一个额外的块级元素

给这个额外添加的块级元素设置clear: both;属性

注意点:内墙法它可以让第二个盒子使用margin-top属性

内墙法它可以让第一个盒子使用margin-bottom属性

外墙法和内墙法区别?

外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度

4.清除浮动的第四种方式

使用伪元素选择器的方式可以清除浮动

本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样

注意点:IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性

使用伪元素清除浮动示例


5.清除浮动的第五种方式

overflow:hidden;作用:1.可以将超出标签范围的内容裁剪掉   2.可以清除浮动

3.如果两个盒子是嵌套关系,那么设置了里面一个盒子顶部的外边距,外面一个盒子也会被顶下来,如果外面的盒子不想被一起顶下来,那么可以通过overflow:hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来

注意点:IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 盒子的高度问题 1.标准流中盒子的高度可以被内容高度撑起来;2.浮动流中浮动的内容不能撑起盒子的高度; 为什么要清...
    壹点微尘阅读 407评论 0 0
  • # 网页的布局方式(标准流/浮动流/定位流) # 浮动元素的脱标 # 浮动元素排列规则 # 贴靠现象 # 清除浮动...
    KsKison阅读 1,634评论 0 1
  • 网页布局方式——浮动流 标签(空格分隔): H5+CSS [TOC] 网页布局方式——浮动流 简介 浮动流是一种"...
    袁俊亮技术博客阅读 446评论 0 1
  • 做自己的方式就是诚实的活着 按照自己身体的意愿行事 饿的时候吃饭 爱的时候不必撒谎 …… 今天又花了三百多块 原因...
    羽衣甘蓝2025阅读 335评论 5 0