H5前端开发学习笔记——0x15清除浮动

清除浮动

• 课时130 浮动元素高度问题(掌握)
• 课时131 清除浮动方式一(理解)
• 课时132 清除浮动方式二(理解)
• 课时133 margintop失效原因(理解)
• 课时134 清除浮动方式三(理解)
• 课时135 清除浮动方式四(理解)
• 课时136 伪元素选择器(掌握)
• 课时137 清除浮动方式五(理解)
• 课时138 清除浮动方式六(理解)

浮动元素高度问题

1. 在标准流中，内容的高度可以撑起父元素的高度
2. 在浮动流中，浮动的元素是不可以撑起父元素的高度的

清除浮动方式一

给前一个父元素设置高度

注意点

企开中，能不写高度就不写高度，所以这种方式用的很少，不推荐使用

清除浮动方式二

给后面的盒子添加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;

1. 他可以将超出标签范围的内容裁减掉
2. 清除浮动
3. 给外面的盒子设置overflow: hidden并让里面的盒子设置margin-top之后，外面的盒子不被顶下来

注意

• IE6依旧不兼容，需要加上*zoom:1