HTML学习-day6 浮动

目录

1.CSS布局的三种机制

（1）普通流

（2）浮动

（3）定位

2.浮动与标准流的父盒子搭配

3.浮动与标准流的兄弟盒子搭配

（1）前后两个盒子都浮动

（2）前一个盒子标准流，后一个盒子浮动

4.清除浮动

 （1）额外标签法（隔墙法）

（2）父级添加overflow属性方法

（3）父元素使用after伪元素

（4）使用双伪元素

---

1.CSS布局的三种机制

网页布局的核心：用CSS来摆放盒子。CSS提供了3种机制来设置盒子的摆放位罩，分别是普通流（标准流)、浮动和定位。

（1）普通流

块级元素：块级元素会独占一行，从上向下顺序排列。常用元素有div、 hr、 p、 h1-h6、ul、 ol、dl、form、table等。行内元素：行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素有span、a、 i、em等。

（2）浮动

让盒子从普通流中浮起来，主要作用是让多个块级盒子—行显示、实现盒子左右对齐、实现文字环绕图片效果。

特点：漂浮在其他标准流盒子上面，不占位置（脱标）；浮动会改变元素的display属性，与行内块相似，但是元素间没有缝隙。

注意：如果父级盒子装不开浮动的盒子，则多出来的盒子会另起一行显示。

（3）定位

将盒子定在浏览器的某一个位置——CSS离不开定位，特别是后面的js特效。

2.浮动与标准流的父盒子搭配

浮动脱标会影响下面标准流的盒子，为了减轻影响，可以给浮动的元素添加一个标准流的父盒子，去掉边框和背景。

子盒子浮动时，不会压住父盒子的边框，有内边距时也能正常显示。

3.浮动与标准流的兄弟盒子搭配

（1）前后两个盒子都浮动

两个盒子都浮动，顶部对齐；

（2）前一个盒子标准流，后一个盒子浮动

前一个盒子标准流，后一个盒子浮动，则后一个盒子显示在前一个盒子下方。

注意：浮动的盒子只会影响当前或后面的标准流盒子，不会影响前面的盒子。如果一个父盒子有多个子盒子，其中一个浮动了，其他兄弟盒子也应该浮动，防止引起问题。

4.清除浮动

原因：很多情况下，父盒子不方便给高度，但是如果子盒子浮动就不占有位置，则父盒子高度为0，会影响下面的标准流盒子。清除浮动的本质是清除父元素因子元素浮动引起的内部高度为0 的问题。清除浮动后，父元素会根据子元素的高度自动撑开。

 （1）额外标签法（隔墙法）

在最后一个浮动的元素后面加一个空标签<div class="clear"></div>

<style>
    .clear {
        clear: both;
    }
</style>

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

（2）父级添加overflow属性方法

overflow:hidden || auto || scroll

优点：代码简洁

缺点：内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素

（3）父元素使用after伪元素

/* 淘宝、百度、网易使用 */
.clearfix:after {
     content: "";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}

.clearfix {
    /* IE6、7 专门清除浮动 */
    *zoom: 1;
}

相当于额外标签法的升级版，但不用添加空标签

优点：结构语义化正确，符合闭合浮动思想

缺点：IE6-7不支持after伪元素，使用zoom:1触发hasLayout

（4）使用双伪元素

/* 小米、腾讯使用 */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

优点：代码简洁

缺点：IE6-7不支持after伪元素，使用zoom:1触发hasLayout