浮动布局
网页布局准则:
第一准则:先用标准的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。
第二准则:先设置盒子大小,之后再设置盒子的位置。
2.2浮动布局注意点
一、浮动和标准流的父盒子搭配
先用标准的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
二、一个元素浮动了,理论上其余兄弟元素也要浮动。**
浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流。
3.3清除浮动的方法:
1.额外标签法也称为隔墙法,是W3C推荐的做法。
清除浮动的本质是?
- 清除浮动的本质是清除浮动元素脱离标准流造成的影响
清除浮动的策略是?
- 闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外边的其他盒子。
2.父级添加overflow属性
可以给父级添加overflow属性,其属性值设置为hidden,auto,scroll
3.父级添加after伪元素
4.父级添加双伪元素
3.4清除浮动总结
为什么要清除浮动?
1.父盒子没高度
2.子盒子浮动了
3.影响下面布局了,我们就应该清除浮动了