父元素如何围住浮动子元素

简介: 父元素如何围住浮动子元素

 父元素如何围住浮动子元素


细节:父类是浮动的话根据继承关系,则父类里边的子类跟着父类一起浮动;但是子类都是浮动的话,

父类不设置浮动的则子类会脱离父类容器;解决:在父类容器中设置位置的子类为非浮动子类。(把浮动想象成泡沫体)

 

bug出现:父元素如何围住浮动子元素(当元素使用float属性,将脱离文档流,因此父元素(没有设置宽高时)便不会包围它。~父容器高度塌陷)

最常用的解决方法:父容器添加伪类after的属性:设置 空content、块属性,以及清除两边的浮动;

51.png

 

 

 

另外一种解决方式:在父容器的最后添加非浮动的清除元素

   第三种方法是给父元素最后添加一个非浮动的子元素,然后清除该子元素。由于父元素一定会包含非浮动的子元素,

通过把这个子元素放在浮动元素的下方,就可以保证父元素一定会包住这个元素,同时也会包住前面的浮动元素。

 

举例子:

li全浮动-》bug:52.png

案例:就是li是浮动的,结构ul放的nav容器(父容器),直接被挤到上面,而不是被li的大小撑大!

解决:nav里边需要在搞一个div块,什么都不放,但是设置它的属性是clear:both;

                       53.png


目录
相关文章
|
17天前
|
前端开发
除了伪元素清除法,还有哪些方法可以解决浮动布局的高度塌陷问题
【10月更文挑战第27天】不同的方法适用于不同的场景和布局需求,在实际开发中,需要根据具体情况选择最合适的方法来解决浮动布局的高度塌陷问题。
|
3月前
|
前端开发 安全 容器
flex为1的父元素被子元素挤出屏幕怎么办?
【8月更文挑战第24天】flex为1的父元素被子元素挤出屏幕怎么办?
54 2
flex为1的父元素被子元素挤出屏幕怎么办?
|
3月前
|
前端开发 容器
cssfloat浮动
cssfloat浮动
31 1
如何让一个盒子居中,解决盒子塌陷的方法
如何让一个盒子居中,解决盒子塌陷的方法
|
6月前
|
前端开发 定位技术
让一个父元素中的子元素垂直水平居中的方法
让一个父元素中的子元素垂直水平居中的方法
39 1
|
6月前
行内元素、块级元素、空元素的理解
行内元素、块级元素、空元素的理解
57 0
|
移动开发 前端开发
关于H5中的相对定位与绝对定位区别的思考
关于H5中的相对定位与绝对定位区别的思考
173 0
|
前端开发