浮动元素高度问题
- 在标准流中内容的高度可以撑起父元素的高度
- 在浮动流中浮动的元素是不可以撑起父元素的高度的
清除浮动方式一
- 给前面的父元素盒子添加高度
- 注意：
- 在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少
清除浮动方式二
- 给后面的盒子添加clear属性
- 取值：
- none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
- left: 不要找前面的左浮动元素
- right: 不要找前面的右浮动元素
- both: 不要找前面的左浮动元素和右浮动元素
- 注意:
- 当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效
清除浮动方式三
隔墙法
- 外墙法
- 在两个盒子中间添加一个额外的块级元素(div)
- 给这个额外添加的块级元素设置clear: both;属性
- 注意:
- 外墙法它可以让第二个盒子使用margin-top属性
- 外墙法不可以让第一个盒子使用margin-bottom属性
- 内墙法
- 在第一个盒子中所有子元素最后添加一个额外的块级元素
- 给这个额外添加的块级元素设置clear: both;属性
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
<div class="wall h20"></div>(这就是“墙”）
</div> - 注意：
- 内墙法它可以让第二个盒子使用margin-top属性
- 内墙法它可以让第一个盒子使用margin-bottom属性
- 外墙法和内墙法区别?
- 外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度
- 写的位置不同
- 在企业开发中不常用隔墙法来清除浮动
清除浮动方式四--伪元素选择器
- 伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
- 格式:
标签名称::before{
属性名称:值;
}
解析:给指定标签的内容前面添加一个子元素
标签名称::after{
属性名称:值;
}
解析：给指定标签的内容后面添加一个子元素
div::after{
content: "么么哒";（/指定添加的子元素中存储的内容/）
width: 50px;
height:0;（/内容是可以超出标签的范围的, 所以高度为0依然可以看见内容/）
background-color: pink;
display: block;（/指定添加的子元素的显示模式/）
visibility: hidden;（ /隐藏添加的子元素/）
} - 清除浮动的方式：
.box1::after{
/设置添加的子元素的内容为空/
content: "";
/设置添加的子元素为块级元素/
display: block;
/设置添加的子元素的高度为0/
height: 0;
/设置添加的子元素看不见/
visibility: hidden;
/给添加的子元素设置clear: both;/
clear: both;
}
.box1{
/兼容IE6/
*zoom:1;
} - 本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样
- 注意：
- IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性
清除浮动方式五
- overflow: hidden;
- 作用：
- 可以将超出标签范围的内容裁剪掉
- 清除浮动(直接在第一个盒子标签内加此属性)
- 可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
- 注意：
- IE6中不支持这种方式, 为了兼容IE6必须添加*zoom:1;属性
