浮动，高度塌陷，清除浮动

一、浮动

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

浮动：css布局的方法，可以设置向左或向右浮动

特点：①脱离标准文档流

②所有浮动元素一行排列，可以设置宽高

③如果浮动元素上面有标准文档流中的块元素，浮动不能上移

④浮动元素从最左边或者最右边开始排列

⑤浮动元素会覆盖标准文档流的元素，除了文本内容

二、高度塌陷

浮动会产生高度塌陷，指包含块没有设置宽高时，这是高度应该由内容撑开，但设置了浮动会脱离标准文档流，这是的高度为0

解决方法：

①给包含块设置高。 可能导致父元素高度不合适

②给父元素设置浮动。使父元素脱离标准文档流，但会影响后面元素的布局

③给父元素设置overflow。此时overflow的值不是visible，通常为hidden

④给父元素设置绝对定位（position）

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

⑥给父元素通过一个伪元素选择器，添加一个块元素或table，添加的元素要在标准文档流中，清除两边的浮动

三、清除浮动

clear-left：清除元素左侧浮动元素对其的影响

clear-right：清除元素右侧浮动元素对其的影响

clear-both：清除元素两边浮动元素对齐影响最大的一侧