CSS浮动样式

当元素被浮动时，会脱离文档流，根据float的值向左或者向右移动，直到它的外边界碰到父元素的内边界或者另一个浮动元素的外边界为止，是CSS布局中实现左右布局的一种方式。

文档流：文档流是元素在web页面上的一种呈现方式，按照出现的先后顺序进行排序。

当父元素里的所有元素都浮动了就会产生高度塌陷。所以必须要清除浮动

清除浮动的方案

• clear属性：清除上下浮动，给需要清除浮动的元素加上clear:both
• BFC属性：清除嵌套浮动
• 空标签：清除嵌套浮动 在浮动元素同一层级里添加<div style="clear:both"></div>
• .clearfix::after{}：清除嵌套浮动 空标签加强的方法

如果父元素里面有元素，父元素不会高度塌陷，但是如果元素都浮动的话，父元素就会塌陷。

如果父元素高度已经明确设置，固定高度或者百分比高度，即使内部子元素全部浮动，父元素的高度也会保持设置值，不会因为子元素脱离文档流而塌陷。

浮动特性的注意点：

• 浮动元素只会影响后面的元素，不会影响其他元素的布局
• 文本不会被浮动元素覆盖
• 给内联元素加上浮动后，设置的长宽是有效的
• 浮动元素放不下的话，会换行。

https://www.ukoou.com/register?ucode=0G5G