CSS笔记：11.浮动

浮动

应用场景：

1. 文字环绕
2. 横向排列

浮动的实现方法：

修改float属性值：

• left：左浮动，元素靠上靠左。
• right：右浮动，元素靠上靠右。
• 默认值为none

1. 当一个元素浮动后，元素必定为块盒。,即使不是块盒，浮动后display会强制修改为block。
2. 浮动元素的包含块，和常规流一样，也是父元素的内容块。

盒子尺寸

1. 宽度width为auto时，适应内容宽度。
2. 高度height为auto时，和常规流一样，适应内容的高度。
3. 外边距margin为auto时，为0.
4. 横向宽度width方面：边框、内边距、百分比设置与常规流一样，是占包含块的百分比。

盒子排列

1. 左浮动盒子靠上靠左依次排列，若一行排不下，则在下一行接着排列。
2. 右浮动盒子靠上靠右依次排列，若一行排不下，则在下一行接着排列。
3. 浮动盒子在包含块中排列时，会避开常规流盒子。
4. 常规流块盒在排列时，无视浮动盒子，浮动盒子覆盖在常规流块盒上。
5. 行盒在排列时，会避开浮动盒子。
6. 在浮动盒子外边距合并不会发生。外边距合并只会发生在常规流盒子中。

• 如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字。该行盒叫做匿名行盒。
• 加宽图片与文字之间的距离可以通过修改图片的（margin-righe和margin-bottom）。
  p元素块盒，img行盒

常见问题：高度坍塌

1. 高度坍塌：子元素脱离父元素。子元素内容没有把父元素撑开。
2. 高度坍塌的原因：常规流盒子的自动高度，在计算时，自会考虑常规流盒子，不会考虑浮动盒子。
3. 解决方式：清除浮动。
   清除浮动：涉及css属性clear

• 默认值：none
• left：清除左浮动。该元素必须出现在前面所有左浮动盒子的下方。
• right：清除右浮动。该元素必须出现在前面所有右浮动盒子的下方。
• both：清除左右浮动。该元素必须出现在前面所有浮动盒子的下方。
  方式一：

    .clearfix{     
            clear:both;  
        }
    /* 在所有浮动盒子下方加一个清除浮动盒子。 */
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="clearfix"></div>
    </div>

方式二：

/* 使用伪元素选择器 */
      .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
    <div class="container clearfix">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        
    </div>