【自学CSS笔记第10篇】——CSS浮动及清除浮动（此一篇足以）

每日反思：每天从起床到睡觉手机不离手，该用功的时候游戏不离手，该念的书没有念好，该学的技能也没学好，随波逐流、人云亦云，以后到了该自己独挡一面的时候，我该用什么来安慰自己？是酒精还是眼泪；

目录

什么是标准流：

什么是浮动：

为什么需要浮动？

浮动的特点：

为什么样清除浮动： 

清除浮动的方式有哪些？

        给父级元素加高度：

        添加额外标签法：

        给父级元素添加： overflow：属性；

        单伪元素清除法：

        双伪元素清除法：

---

什么是标准流：

        标准流是指：所有标签默认的排列效果；

什么是浮动：

       浮动是指让元素脱离标准流，设置了浮动属性的元素会脱离标准普通流的控制。标准流无法满足我们想要的布局，所以我们让元素脱离标准流发热控制从而移动到我么想要的位置，但是这样也会伴随着浮动而带来影响浮动元素后面布局的问题：

为什么需要浮动？

       很多布局效果，标准流布局无法完成，所以我们就需要设置浮动来改变元素（标签）默认的排列方式，让它听我们指挥。
举例说明：让多个块级元素在一行显示之间没有空隙；

• 方式1：标准流布局方式是将块级元素的display属性设置为inline-block，但这样虽然可以实现，如果你将代码换行写，他们之间就会有空白间隙，如果不换行写，代码的可读性就会很差，不能达到我们要的效果。
• 方式2：可以将这些块，都设置浮动（即添加float属性），并且浮动方向相同。那么他们之间就不会有空白间隙，达到了我们的要求；

语法格式：

 选择器 {
        float: 属性值;
        }

属性值：

• left 元素向左浮动。
• right 元素向右浮动。
• none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
• inherit 规定应该从父元素继承 float 属性的值。

浮动的特点：

1. 浮动元素会脱离文档流，元素脱离文档流以后，不会再占用文档流的位置，它下边的元素会立即向上移动
2. 元素浮动以后，元素会尽量向页面的左上或页面右上漂浮
3. 浮动元素默认不会从父元素中移出
4. 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
5. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6. 浮动的显示模式相当于行内块元素；
    

为什么样清除浮动： 

        看一个案例：当父级元素没有设置高度（父级元素就不会占用标准流的位置，下面用案例证明），且子级元素添加了float属性（子级元素脱离标准流，也不占位置）那么这个时候浮动就影响下面的布局了，我们就该清除浮动了。

定义两个盒子，一个只给宽度、不给高度，另一个都给；

<div class="box">div>
<div class="bottom">div>

给每个盒子设置下面CSS设置； 

        .box{
            width: 300px;
            /* height: 300px; */
            background-color: red;
        }
        .bottom{
            width: 300px;
            height: 300px;
            background-color: blue;
        }

预期的效果应当是， 红色框在上面，蓝色在下面：但是结果却是这样的；

由此可见：没有设置宽高的盒子，也不占标准流的位置；  设置了float属性的子级元素也不占标准流的位置，那么这个位置上就空了，当下面还有其他块儿时，自然而然下面的块儿就会补充到该位置，从而整个布局被打乱，出现块重叠问题；

       从上面我们明白了什么是浮动，那清除浮动是干什么呢？就是当父级元素没有设置高度，且子级元素全部浮动，我们能想一个办法，让下面的布局不会上移打乱布局，下面五种解决的方法 ；   

清除浮动的方式有哪些？

给父级元素加高度：

         我们从出现问题的原因入手以解决问题，既然父级元素不加高度，并且其子级元素浮动会造成后面的布局出错，那我们就给父级元素添加高度；但是这样有一个缺陷：当我们在项目中要求父级元素不能设置高度是就不能用这个方法，所以这个办法不常用；

---

添加额外标签法：

         既然在父级元素只设置宽，不设置高，形不成区域、且子级元素添加了float属性浮动起来，脱离标准流的控制；那么我们就通过添加额外标签以规定下方块儿的最高边界（就相当于给马路中间起一道墙，告诉右面的人，这是界线你不能过去！）；那么如何添加呢？在父级元素内容的最后添加一个块元素，并给该块级元素设置CSS，设置如下：

语法： 选择器 {
clear:both;
}

优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差，造成结构的混乱，一般情况下不会使用这一种方式来清除浮动。

---

给父级元素添加： overflow：属性；

语法： 选择器 {
overflow:hidden;
}

优点：书写简单

---

单伪元素清除法：

这个方法，其实是在添加额外元素的方法上给了一个优化，用伪元素来代替额外元素；
缺点：有些浏览器会出现兼容性问题。

---

双伪元素清除法：

缺点：有些浏览器会出现兼容性问题。

---

文章呢写的还是不够详细和不够通俗易懂，因为我也是刚刚学完，但是会在最后的总复习中改进；