CSS-清除浮动

清除浮动

盒子高度问题

在标准流中内容的高度可以撑起盒子的高度

在浮动流中浮动元素内容的高不可以撑起盒子的高

清除浮动方式一

给前面的父盒子添加高度
示例代码:

添加高度前:
添加高度后

注意点:
- 在企业开发中能不写高度就不写高度, 所以这种方式不常用

清除浮动方式二

利用clear:both;属性清除前面浮动元素对我的影响
示例代码:

添加clear: both;前:
添加clear: both;后

注意点:
- 使用clear:both之后margin属性会失效, 所以不常用

清除浮动方式三

在两个有浮动子元素的盒子之间添加一个额外的块级元素
示例代码:

添加额外块级元素前

添加额外块级元素后

注意点
- 在外墙法中可以通过设置额外标签的高度来实现margin效果
- 搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以不常用

清除浮动方式四

在前面一个盒子的最后添加一个额外的块级元素
示例代码

添加额外块级元素前

添加额外块级元素后

注意点:
- 内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
- 和内墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

清除浮动方式五

什么是overflow:hidden?
- overflow:hidden的作用是清除溢出盒子边框外的内容
示例代码

.test{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
            overflow: hidden;
}

我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字

添加overflow:hidden前

添加overflow:hidden后

如何利用overflow:hidden;清除浮动
- 给前面一个盒子添加overflow:hidden属性
示例代码

添加overflow:hidden;前

添加overflow:hidden;后

注意点:
- 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
- IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;
- 优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突
*zoom:1;和_zoom:1的区别
- 这个是hack写法，用来识别不同版本的IE浏览器
- _后面的属性只有IE6能识别
- *后面的属性 IE6 IE7能识别

清除浮动方式六

给前面的盒子添加伪元素来清除浮动
示例代码

添加伪元素前

添加伪元素后

注意点:
- 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
- CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西

CSS-清除浮动

清除浮动

盒子高度问题

清除浮动方式一

清除浮动方式二

清除浮动方式三

清除浮动方式四

清除浮动方式五

清除浮动方式六

你可能感兴趣的:(CSS-清除浮动)