1. 浮动盒子在摆放时,要避开常规流盒子;
2. 常规流盒子在摆放时,无视浮动盒子;
注释:在设置浮动时,浮动盒子会**脱离文档流**;文档流表示浮动元素的内容不占用父级区域(content);
文档脱离会导致高度坍塌;(因为常规流盒子会无视浮动盒子)
解决文档坍塌除了用(overflow:hidden;)找回坍塌的高度;还可以用清除浮动(clear:both;)找回坍塌高度
常规流遇上浮动
清除浮动 :对一个元素清除浮动,可以让该元素在摆放时,出现在浮动元素的下方
clear属性
不可继承
默认值:none
取值:none(不清除浮动)
left(清除左浮动,元素在左浮动的盒子下方摆放)
right(清除右浮动,元素在右浮的盒子下方摆放)
both(清除左右浮动,元素浮动的盒子下方摆放)
注释:对最后一个子元素使用(clear:both;),可防止父元素高度坍塌
视觉格式化模型————浮动:当元素的float属性的取值为left或right时,元素属于浮动定位
属性float
不可继承
默认值:none
取值:none、left、right
盒模型中的auto(自动)值
属性:
margin-left:auto;
margin-right:auto;
margin-tpo:auto;
margin-bottom:auto;
width:auto;
height:auto;
浮动:
0px
0px
0px
0px
适合内容宽度
适合内容高度