CSS学习（8）——CSS浮动

目录

一、传统网页布局的三种方法

二、浮动

1.语法

2.浮动特性

2.1脱标

2.2浮动元素一行显示

2.3浮动元素具有行内块特性

2.4浮动元素经常和标准父级搭配使用

2.5一个元素浮动了，理论上其余的兄弟元素也要浮动

3.清除浮动

3.1额外标签法

3.2给父级添加overflow

3.3 :after伪元素法

3.4双伪元素清除浮动

---

一、传统网页布局的三种方法

1.普通流（标准流 / 文档流）

按照标签规定好的默认方式排列。即块级元素独占一行，从上到下排序。行内元素会按照顺序，从左到右顺序排列，碰到父元素的边界后换行。

2.浮动

3.定位

二、浮动

多个块级元素纵向排列找标准流，横向排列找浮动。

float属性用于创建浮动框，将其移动到一边，指导左边缘或右边缘触及包含块或者另一个浮动框的边缘。

1.语法

选择器{ float: 属性值; }

属性值：none（元素不浮动默认值），left（向左浮动），right（向右浮动）

2.浮动特性

2.1脱标

（1）脱离标准流的控制。移动到指定位置。

（2）浮动的盒子不再保留原先的位置。

2.2浮动元素一行显示

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示且顶端对齐排列。

注：浮动的元素是互相粘贴靠在一起的，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

2.3浮动元素具有行内块特性

（1）行内元素若有了浮动则不需要转换为块元素就可以直接设置高度和宽度。

（2）如果块级盒子没有设置宽度，默认宽度和父级一样宽，但添加浮动后，它的大小和根据内容来决定。

2.4浮动元素经常和标准父级搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

2.5一个元素浮动了，理论上其余的兄弟元素也要浮动

3.清除浮动

由于多数情况下不方便给父盒子高度，但由于子盒子浮动不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。为了不使父盒子影响子盒子。

语法：

选择器{  clear: 属性值;  }

left：清除左。                    right：清除右                          both：清除左右

3.1额外标签法

在最后一个浮动的子元素后面添加一个额外的标签，如添加 清除浮动样式。注：添加的元素必须是块级元素。

3.2给父级添加overflow

可以给父级添加overflow属性，将其属性设置为hidden。

缺点：无法显示溢出的部分。

3.3 :after伪元素法

直接复制代码（原理以后学），给父元素class中添加clearfix。

语法：

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility:hidden;
}

.clearfix{
    /* 为了兼容IE6、7 */
    *zoom:1;
}

3.4双伪元素清除浮动

用这个方法。

方法同上，给父级元素添加。

语法：

.clearfix:before,
.clearfix:after{
    content: "";
    display: table;
}

.clearfix:after{
    clear: both;
}

.clearfix{
    *zoom: 1;
}

详细参考：CSS Float（浮动） | 菜鸟教程 (runoob.com)