7.css浮动
知识点1.盒子摆放标准 普通流,浮动,定位
思考1:浮动div会压着普通的标准流,不占用本来的位置,多个div浮动,改变div显示方式变为行内块元素
思考2:其实一般布局都是父div包括子div ,但是父div不设置高度,子div左右浮动,然后给子div设置高度,撑大父div
思考3:浮动元素和父盒子关系:1.子元素默认和父元素的border对齐 ,如果有padding 那么就和padding对齐
思考4:浮动元素和兄弟盒子关系第一个兄弟不浮动,第二个兄弟浮动,布局不变
建议:如果一个盒子里面有多个子盒子,其中一个要浮动,其他的应该都跟着浮动[要么都浮动,要么都不浮动]
知识点2:清除浮动
原因:很多时间不方便给父元素高度,但是子元素需要浮动,如果子元素浮动,那么就会导致布局变形.所以需要清除浮动,方法
1、[隔墙法] clear |left |right |both 具体在最后一个浮动元素后面添加一个元素例如<div style="clear:both"></div>
2、父元素添加overflow:hidden属性 但是有局限性
3、伪元素清除浮动
.clearfix:after { content:""; height: 0; clear:both; visibility: hidden; display: block; } .clearfix { *zoom:1; }
总结:好处 使用隔墙法:会增加页面元素,使用overflow有局限性 ,使用伪元素:可以结合2者,最好的选择