解决浮动的影响（清除浮动）

解决浮动的影响（清除浮动）

解决对后面兄弟元素的影响：

给后面的兄弟元素设置 CSS 属性 clear:both既可

解决对父元素的影响：

1. 方案一：给父元素设置 overflow 属性，值不是 visible 既可。（推荐）

2. 方案二：以浮制浮，给元素也设置浮动； 缺点：父元素浮动之后产生新的影响。

3. 方案三：给父元素设置固定高度，缺点：需要计算父元素高度。

4. 方案四：在所有浮动元素的后面添加元素（父元素的最后一个子元素），给该元素设置属性 clear:both，要求该元素是块级元素。 缺点：需要额外添加元素。

5. 防范五： 利用伪类选择器，给元素动态地创建最后一个子元素，该元素会在所有浮动元素的后面，元素与方案四一致。(推荐)

   父元素::after {
       content: "";
       display: block;
       clear: both;
   }
   

注意：

1. 方案一和方案二，本质上都是通过给父元素开启BFC来清除子元素浮动影响的。、
2. 只要有元素浮动，就一定要清除浮动的影响！