浮动

1.元素浮动产生的特点

1. 浮动元素会脱离文档流，后面的的元素会占据原来的位置（显示在底下，文字会被挤出）
2. 不论元素原来的显示模式是什么，设置成浮动，具有自己的显示模式，具有如下特点
   ① 默认宽高被内容撑开，不存在外边距塌陷和合并，左右外边距设置auto不会居中
   ② 不会被父元素作为文本去处理
   ③ 可以设置宽高、内外边距
3. 多个兄弟元素一起浮动，会横向排列，一行放不下，自动换行

2.浮动元素产生的影响及解决办法

​ 影响:

元素浮动之后无法撑起父元素的高度，使父元素高度塌陷

解决：

- 方案一 父元素设置高度
- 方案二 父元素也设置浮动
- 方案三 给父元素设置 overflow:hidden（推荐）
- 方案四 在浮动元素的后面添加一个兄弟元素，该元素要求是块级元素，设置 clear:both
- 方案五 原理与方案四一致，使用伪元素选择器动态地在浮动元素的后面添加一个兄弟元素，设置 clear:both(推荐)

. clearfix::after {
     content: "";
     display: block;
     clear: both;
}