CSS浮动

98 阅读1分钟

浮动布局

网页布局准则:

第一准则:先用标准的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。

第二准则:先设置盒子大小,之后再设置盒子的位置。

2.2浮动布局注意点

一、浮动和标准流的父盒子搭配

先用标准的父元素排列上下位置之后内部子元素采取浮动排列左右位置

二、一个元素浮动了,理论上其余兄弟元素也要浮动。**

浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流。

3.3清除浮动的方法:

1.额外标签法也称为隔墙法,是W3C推荐的做法。

清除浮动的本质是?

  • 清除浮动的本质是清除浮动元素脱离标准流造成的影响

清除浮动的策略是?

  • 闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外边的其他盒子。

2.父级添加overflow属性

可以给父级添加overflow属性,其属性值设置为hidden,auto,scroll

3.父级添加after伪元素

4.父级添加双伪元素

3.4清除浮动总结

为什么要清除浮动?

1.父盒子没高度

2.子盒子浮动了

3.影响下面布局了,我们就应该清除浮动了