个人博客 > 学无止境 > WEB前端 > CSS div浮动之后内容不正常解决办法

CSS div浮动之后内容不正常解决办法

这里呢也是博主在写CSS时发现的,文章内容区域是左右布局,而且规定不能用行内块属性(display:inline-block),那只有浮动了,浮动之后内容就往上跑,且背景图高度也不正常了。那么如何解决呢?

方法一:

用clear:both;来清除浮动,如图所示:

CSS div浮动之后内容不正常解决办法

但这种方法并不好用,修过淘宝店铺的都知道,插入空标签系统会默认插入“& nbsp;”这样一来,空的标签就占了一定的高度。这里浮动就需要解决这个高度的问题,完整写法如下:

.clear{clear:both;height:0;line-height:0;font-size:0;}这里字体大小只能改为0,不然会出现上面这种情况。

博主推荐用方法二:

利用伪对象:after

代码如下:

给需要浮动的父级元素加上属性:

 .clearfix:after{content:"";display:block或table;clear:both;}/*仅适用于纯块对象*/
 .clearfix{*zoom:1;}/*ie低版本需要设置此属性来触发haslayout使其恢复模块高度

如图所示:

CSS div浮动之后内容不正常解决办法

以上就是css浮动导致文章或背景图错位的解决办法。

本文出自:琅枫个人博客。如需转载请注明出处!

本文出处:"https://www.phpfeng.cn/learn/web/125.html"

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对琅枫博客的支持! ~(@^_^@)~

微信打赏

琅枫博客微信号

支付宝打赏

琅枫博客个人支付宝
本文关键词: 办法 内容



你想在庞大的互联网上留下一丝足迹?

我不想成为一个庸俗的人。十年百年后,当我们死去,质疑我们的人同样死去,后人看到的是裹足不前、原地打转的你,还是一直奔跑、走到远方的我?

点我了解如何搭建个人博客?