一个80后网站前端设计和平面设计师的小站
您现在的位置:首页 > 随心笔记 > 关于DIV嵌套有浮动-清除浮动的方式

关于DIV嵌套有浮动-清除浮动的方式

编辑:文轩发布于:2020-03-03 11:08:31随心笔记人浏览

摘要:今天空了看到一个DIV嵌套浮动清除的几种方式,与大家分享一下。

        做网页前端,我们在用DIV做嵌套的时候,有父级元素和子级元素一起,当子级元素里有浮动的时候,就会脱离文档流,父级元素就会出点问题了,针对这个问题,与大家分享一下解决方式。

下面是几种基本的解决方式:(最好用、最常用的是最后一种)

1. 给父元素设置和子元素一样的高度。当子元素的高度有改变,父级也跟着出问题。
2. 给父元素也一样设置同样的浮动。但是如果外面还有嵌套,也会出问题。
3. 加一个清除浮动的类样式,.clear{clear:both}.但是有个问题,就是加了一个DIV代码,对页面不好。
4. 加一个伪类元素。伪元素样式.son::after{content:""; display: block;clear: both;}
5. 加个溢出隐藏样式。.son{overflow: hidden;}。最常用的就是这个,代码简单方便。

标签: DIV嵌套布局  清除浮动  

打赏赞助本站

  • 如果你觉得本站很棒,对您有所帮助,可以通过扫码打赏赞助本站哦!我也会努力做好本站哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~