CSS浮动与高度塌陷

1、浮动

注：标准文档流，是网页的最底层，在标准文档流里面所有的元素都是按照元素的性质排列。

1、含义

css布局的方法，向左或者向右浮动。

2、特点

1、脱离标准文档流。

2、所有的浮动元素一行排列，可以设置宽高。

3、如果浮动元素上面有在标准文档流中块级元素，浮动不能上移。

4、浮动元素从最左边或者最右边开始排列。

5、浮动元素会覆盖标准文档流中的元素，除了文本内容。

2、高度塌陷

1、含义

包含快元素没有设置宽高的时候，高度会有内容撑开，浮动元素会脱离标准文档流。

2、解决办法

1、给包含快元素设置高。(可能设置的高度不合适)

2、给父元素设置宽高。(父元素也会脱离标准文档流，影响后面布局)

3、父元素设置voerflow，值非visible，常用的是hidden。

4、父元素设置绝对定位。

5、在父元素后面设置一个块元素，块元素要在标准文档流中，清除两边的浮动。

6、通过css的伪类选择器给父元素设置一个块元素或者table元素，添加的元素要在标准文档流中，并且清除两边的浮动。

3、清除浮动

1、清除左侧的浮动

使用clear:left;，会清除左侧浮动带来的影响。

2、清除右侧的浮动

使用clear:right;，会清除右侧浮动带来的影响。

3、同时清除两侧的浮动

使用clear:both;，会清除两边浮动带来影响最大的一侧浮动。