清除浮动
- 课时130 浮动元素高度问题(掌握)
- 课时131 清除浮动方式一(理解)
- 课时132 清除浮动方式二(理解)
- 课时133 margintop失效原因(理解)
- 课时134 清除浮动方式三(理解)
- 课时135 清除浮动方式四(理解)
- 课时136 伪元素选择器(掌握)
- 课时137 清除浮动方式五(理解)
- 课时138 清除浮动方式六(理解)
浮动元素高度问题
- 在标准流中，内容的高度可以撑起父元素的高度
- 在浮动流中，浮动的元素是不可以撑起父元素的高度的
清除浮动方式一
给前一个父元素设置高度
注意点
企开中，能不写高度就不写高度，所以这种方式用的很少，不推荐使用
清除浮动方式二
给后面的盒子添加clear属性
取值
- none 默认取值，按照浮动元素的排序规则来排序
- left 不要找它前面的左浮动元素
- right 不要找它前面的又浮动元素
- both 不要找它前面的左浮动元素和有浮动元素(企开用的最多)
注意点
为标签添加clear之后，标签的margin属性就失效了
margintop失效原因
当子元素设置margin-top后，它前一个元素已经浮动了，他按理说是应该顶着body下移，但是body是不会动的，只要你给body加个border，然后margin-top大于它上一个元素的高，那就何以实现当前子元素的下移，但企开中，没人会给body加边框的，加边框仅仅作为理解
清除浮动方式三
即隔墙法
1. 外墙法
在两个盒子中间添加一个块级元素，然后为其设置clear:both
注意点
- 外墙法能让第二个盒子用margin-top属性，但不能让第一个盒子使用margin-bottom属性
- 在企开中，我们要是想让上下两个盒子隔开的话，都是给我们添加的那个块级元素设置高度就行
2. 内墙法
在第一个盒子中所以子元素最后添加一个块级元素，然后为其设置clear:both
注意点
- 内墙法能让第二个盒子用margin-top属性，也可以让第一个盒子使用margin-bottom属性
- 为那个新加的块级元素设置高度也可以实现其对应的效果
内外墙的区别
外墙法不能撑起第一个盒子的高度，而内墙法则可以
注意一下
隔墙法在企开中不常用，因为你添加那一堆空白的块级元素很没意义，违背结构和样式分离的原则
伪元素选择器
它是给指定标签内容前面添加一个子元素，或者给标签内容后面添加一个子元素
格式
div::before {
content: "this is";
width: 50px;
height: 50px;
background-color: pink;
display: block;
}
div::after {
/* 指定添加的子元素中的内容 */
content: "world!";
/* 指定添加子元素的宽高 */
width: 50px;
height: 50px;
/* 指定添加子元素的背景颜色 */
background-color: pink;
/* 指定添加子元素的显示模式 */
display: block;
/* 指定添加子元素的可见方式，hidden为隐藏 */
visibility: hidden;
}
清除浮动方式五
/* 设置添加的子元素的内容为空 */
content: "";
/* 设置添加的子元素为块级元素 */
display: block;
/* 设置添加的子元素的高度为0，让其不占用空间 */
height: 0;
/* 设置添加的子元素为隐藏 */
visibility: hidden;
/* 重要！！！！设置添加的子元素设置clear: both */
clear: both;
}
.box1 {
/* 兼容IE6的骚操作 */
*zoom: 1;
}
清除浮动方式六
overflow: hidden;
- 他可以将超出标签范围的内容裁减掉
- 清除浮动
- 给外面的盒子设置overflow: hidden并让里面的盒子设置margin-top之后，外面的盒子不被顶下来
注意
- IE6依旧不兼容，需要加上*zoom:1
