7. CSS 的 浮动

浮动

• 文字环绕图片
  imag{float: left;}

• 文字环绕文字
  使用伪元素选择器选出第一个元素，然后加一个float属性

浮动特点：

• 元素浮动之后脱离了原规则
• 浮动之后，宽与高默认被内容撑开，可以自己设置
• 浮动后与其他元素共用一行，按照 3D 角度想，浮动的元素是飘起来的
• 浮动的元素可以设置margin，不用关心margin塌陷问题
• 不会像行内块一样当做文本处理，没有行内块的空白问题

浮动产生的影响

• 对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素下面；对前面的兄弟元素没有影响
• 对元素的影响：不能称其父亲元素的高度，导致父元素高度塌陷，但是父元素的宽度依旧束缚浮动的元素

解决浮动产生的所有影响

• 当元素没有浮动且是非行内元素：添加属性clear:left;消除所有左浮动兄弟所产生的影响，clear:both;消除所有浮动兄弟所产生的影响
• 当元素也是浮动元素，最后一个块元素给出样式为：clear:both;，设置伪元素

.父元素class::after{
  content:'';
  display: block;
  clear:both;
}

解决浮动产生父元素高度的影响

• 给父元素指定高度
• 给父元素也设置浮动，会给兄弟带来影响
• 给父元素设置overflow: hidden;

ps：布局原则：设置浮动，兄弟元素要么全都浮动，要么全部浮动