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

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

方法一：

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

但这种方法并不好用，修过淘宝店铺的都知道，插入空标签系统会默认插入“& 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浮动导致文章或背景图错位的解决办法。

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

本文出处："https://www.langfujun.top/learn/web/125.html"