04-css浮动

CSS浮动：

1.了解CSS浮动的概念：

• 使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动， 直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动属性：用float属性， 它的属性值有两个，为right和left两个属性值。

 2.浮动的实例：

 

3.使用浮动常出现的问题：

1. 对附近的元素布局造成改变，使得布局混乱（覆盖）
2. 因为元素脱离了文档流，会造成一种坍塌的现象。简单的说就是原来的父元容器是被元素撑开的，当浮动之后，父容器的高度就会坍塌。

4.清除浮动：

• 方式一：给前面一个父元素设置高度
  缺点：元素容器不可以自适应高度
• 方式二：在浮动的元素后面加一个空元素，设置属性为clear：both。 在浮动元素后面的元素设置clear：both。
  缺点：成本太高，添加了一个元素，难维护
  clear属性取值：
  none:默认取值，按照浮动元素的排序规则（左浮动找左浮动，右浮动找右浮动）
  left：不要找前面的左浮动元素
  right：不要找前面的右浮动元素
  both：清除所有浮动元素
• 方式三：通过设置父容器css的样式： “overflow：hidden”
  通过overflow:hidden;来清除浮动，其实overflow无形中对父容器高度进行了测量， 是设置父容器高度的另一种方法。
• 方式四：after伪类：对父元素的after伪类进行设置。
  用伪元素选择器和内墙法结合使用来给元素清除浮动