css——浮动3

3.浮动元素父级高度塌陷

当父级元素没有设置高度时，高度会由文档流内容撑开。

而当子元素浮动之后，脱离了文档流，所以父级高度不会被撑开，这对我们后续的布局结构会造成很多困扰。

解决高度塌陷方法：

• 方法1 -- 子元素加clear

  在浮动元素后面加一个空的子元素，并给其CSS属性clear；

  <div style="clear:both"></div

  clear取值： left 清除左浮动 | right 清除右浮动 | both 清除所有浮动

• 方法2 -- 父元素加宽高

  直接规定父元素的宽高，就不存在塌陷问题了。缺点是，得手动计算合适的宽高，并且扩展性不好。

• 方法3 -- 父元素BFC(Block formatting context)化

  父元素满足下列条件之一即可：

  • 根元素

  • float属性不为none

  • position不为static和relative

  • overflow不为visible（较常用，通常设置overflow : hidden来解决高度塌陷）

  • display为inline-block / table-cell / table-caption / flex / inline-flex

• 方法4 -- 父元素利用伪类after

  当前最主流的方式，利用伪元素，相当于给父级多加了一个子元素，同时我们可以将样式公用，所有需要清除浮动的父元素加上一个相同的class名clear就可以解决：

  .clear{zoom: 1;}/*IE6,7不支持::after伪类，所以没法用下面的代码，这个神奇的zoom可以直接解决IE6,7的清除浮动问题*/
  .clear::after{ content: ""; display: block; clear:both; }

4. 补充

• 注意：元素浮动之后，不再支持margin:auto，只支持margin确切的值。

• 遇到父元素时浮动元素会停止不动。

• 设置浮动元素的上一个元素是普通文档流中的元素,元素相对于水平垂直位置不动。

• 推荐使用浮动来做横向布局而不是inline-block

  line-block布局的基线对齐处理较为麻烦，浮动不用担心这个问题；

  line-block布局空格会被解析显示在页面中，浮动不用担心这个问题。

• list-style:none;清除ul或ol的默认项目符号。

• min-width max-width