浮动
float即脱离文档流,紧贴父元素(默认为body文本区域)
float元素margin属性仍然有效
空出的位置由后续的非浮动元素填充
1、块级元素:直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。
2、内联元素:有空隙就插入。
解决float元素导致父级元素不能自适应高度
当在对象内的盒子使用float后,导致对象本身不能被撑开自适应高度。
方法一:父级设置固定高度
缺点:
父级是固定高度,而不随内容高度自适应高度。
只能解决能确定子级对象高度。
实例:
假如知道内部div高度100px,那对父级设置height为100px
.divcss5{width:500px;border:1px solid #000;padding:10px; height:100px}
.divcss5-lf{ float:left; width:220px; height:100px; background:#000}
.divcss5-rt{ float:right; width:230px; height:100px; background:#06F}
方法二:clear div清除浮动
对父级div标签闭合