四、CSS 速览—— CSS 的浮动 float 属性

1. 浮动的基本使用

标准文档流不能实现所有效果，还需要让标签去标准化实现非标准流。让标签去标准流的方法：浮动、定位

浮动属性专门用于网页的并排布局，脱离了标准文档流，不再受元素等级的限制，既可以并排显示，又可以设置宽高。

• float: left 往左浮动
• float: right 往右浮动

2. 浮动布局：

• 所有的兄弟元素，有一个浮动，剩下的所有兄弟元素必须浮动。
• 如果浮动元素不设置宽度，不会撑满父盒子，而被内容撑满。

3. 浮动的性质

• 浮动的元素脱标：标准流元素区分行、块，浮动元素脱离标准流后既可以设置宽高又可以并排显示，不在区分行内、块级元素。

• 浮动的依次贴边：父盒子空余宽度不足，存放不下的子盒子依次向前一个兄弟贴边。

• 浮动的margin塌陷问题：浮动之后不会有标准流的margin塌陷现象，各自有各自的margin，不会再塌陷。

• 浮动元素让出标准流：浮动元素脱离了标准流，它会让后面的元素占有自己原来的位置，即脱标。

• 浮动的字围现象：同级元素中，前一元素浮动让出标准流，后面的标准流盒子中的文字围绕浮动元素显示。

4. 清除浮动影响

浮动影响

  标准流的盒子，如果不设置高度，会被内容自动撑高。如果盒子内的元素浮动了，子盒子脱标后，不能撑高父盒子，会导致父盒子的高度会为0，导致父盒子兄弟标签的子盒子的浮动贴边。

<style> 浮动影响导致的问题
    *{
        margin: 0;
        padding: 0;
    }
    .box, .box1 {
        width: 800px;
        border: 5px solid red;
    }
    .box {

    }
    .box1 {
        border-color: blue;
    }
    .box p {
        width: 80px;
        height: 100px;
        background: cyan;
        margin: 0 5px;
        float: left;
    }
    .bo1 p {
        width: 80px;
        height: 100px;
        background: orange;
        margin: 0 5px;
        float: left;
    }
</style>
<div class="box clearfix">
    <p></p>
    <p></p>
    <p></p>
</div>
<div class="box1 clearfix">
    <p></p>
    <p></p>
    <p></p>
</div>

• clear: left 清除前面左浮动的影响
• clear: right 清除前面右浮动的影响
• clear: both 清除前面所有浮动影响

解决方法

1. 利用内墙法解决：利用clear和height属性，制作一堵墙，将墙放在两个受浮动影响的父元素内的最后。

   <style>
       .cl {
           clear: both;
       }
   </style>
   <div class="box1">
       <p></p>
       <p></p>
       <p></p>
       <div class="cl"></div>
   </div>
   <div class="box2">
       <p></p>
       <p></p>
       <p></p>
       <div class="cl"></div>
   </div>
   

2. 利用伪类法解决：

   <style>
       .clearfix::after{
           content: '';
           visibility: hidden;
           display: block;
           height: 0;
           clear: both;
       }
   </style>
   <div class="box1 clearfix">
       <p></p>
       <p></p>
       <p></p>
   </div>
   <div class="box2 clearfix">
       <p></p>
       <p></p>
       <p></p>
   </div>
   

3. 利用overflow属性解决：overflow属性有BFC特性，BFC有一特点，即使该标签能被内部元素撑高。

   <style>
       .box1 {
           overflow: hidden;
       }
       .box2 {
           overflow: hidden;
       }
   </style>
   

实际开发中，使用内墙法、overflow属性解决浮动影响。