- 浮动:float:left/float:right
- 标准流(文档流):元素按部就班按照自身的特性排列。
- 浮动:元素会脱离标准普通流的控制,移动到指定位置的过程
- 结论(浮动的特征):
- 浮动后的元素会脱离标准流,漂浮在其他没有浮动的盒子上边
- 浮动后的元素不占有原来的位置
- 浮动后的两个块状元素会在同一行显示
- 浮动后的元素不会超出父元素的范围
- 浮动后的元素自动的转化为行内块元素
- 浮动后的元素不超过父元素的内边距
遇到的问题;
浮动元素引起的问题
答:多个浮动起的元素是无法撑开父元素的宽度,父元素的高度可能会变成0。
还有若浮动元素前面还有同级元素没有浮动则会影响页面结构
2、清除浮动
- 清除浮动 : 清除浮动所带来的影响,并不是真正的清除浮动。
- 为什么要清除浮动?
浮动后的元素不会撑开父元素的高度,因为浮动是不占位置的。
3、如何清除浮动:
- 额外标签法:在浮动元素的后边加上标签
- <div ></div>
- 清除左浮动 clear: left
- 清除右浮动 clear: right
- 清除左右浮动 clear: both
- 优点:通俗易懂,书写方便
- 缺点:添加了额外的标签,结构化差
- overflow 属性:在父元素中添加
- overflow: hidding;
- overflow:scroll;
- overflow:auto;
- 优点:代码简洁
- 缺点:盒子中多余的内容会被隐藏掉
- 使用 after 伪元素清除浮动:在父元素中添加
- .____::after { content:' ';display:block;clear:both;}
- 优点:符合闭合浮动思想、结构语义话正确
- 缺点:IE6-7 不支持 :after
- 双伪元素清除浮动:给父元素添加 after 以及 before 伪元素
- .____::after, .____::before { content: ' ';display: table (发送BFC);clear: both;}
- 优点:代码简洁
- 缺点:IE6-7 不支持 :after