css浮动样式

1. 浮动样式详解

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

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

• float浮动

• none 表示不浮动，所有之前讲解的html标签默认不浮动

• left 左浮动

• right 右浮动

• inherit 继承父元素的浮动属性

• clear属性

• left左侧不允许浮动元素；

• right右侧不允许浮动；

• botn两侧均不允许浮动元素；

• none允许浮动出现在两侧；

• inherit规定应该从父元素继承 clear 属性的值

2. 高度坍陷问题解决

清除浮动的方案

• clear属性
• BFC
• 空标签
• 给父元素设置height
• .clearfix::after{}
• overflow: hidden;

上下标签清除浮动
使用clear属性，往下面的标签加属性clear:both;

嵌套标签清除浮动
给子元素加个空标签设置clear:both，缺点要给每个需要清除浮动的元素添加一个空标签。
使用伪类元素，content:""添加的是一个内联盒子，需要先转成块级盒子

3. 浮动特性注意点

• 只会影响后面的元素
• 文本不会被浮动元素覆盖
• 具备内联盒子特性:宽度由内容决定
• 具备块级盒子特性:支持所有样式
• 浮动放不下，会自动换行