一、使用clear属性
哈喽！聊聊怎么用CSS处理烦人的浮动问题呗！那个clear属性挺靠谱，可以解决让父元素变高和子元素乱跑的情况。这个clear属性主要有四种选择——不用、只向左、只向右或两者都清。举个例子，要是最顶部的浮动元素下加上一个空格div，再将clear属性设置为both，瞬间浮动就消失！
试试看，直接把那个空格 div变成一种类别，然后加个style=”height:0; overflow: hidden;”。这样的话，隐藏效果就完美了，而且再也不会影响到页面布局，浮动问题也消失不见
二、使用伪元素
在CSS中搞定清理浮动其实挺简单滴！首先在父级元素上加上”clearfix”类，接着用伪元素的:after来清除浮动。具体操作是，content一项就随便打几个空格，display就设为table，clear选个both。这样既不会多添乱七八糟的标签，代码看着也整洁不少~
三、使用overflow属性
搞定浮动！只要给父图层overflow设个隐藏、自动或滚动都行。这样就能开BFC（块格式化上下文），让那些顽皮的浮动块老实待顶上。但别忘了，浮动块要是比父图层高太多，网页就得加滚动条儿，既难看又难受呦！
.clear {
clear: both;
height: 0;
overflow: hidden;
}
四、使用BFC（块级格式化上下文）
搞定元素乱跑可不是什么难事，咱们只要打造专属的绘图区就行。至于咋整？display:block; overflow:hidden;或overflow:auto;轻松就能搞定它们，无论大小都能轻松应对，浮动也不例外！
.clearfix:after {
content: '';
display: table;
clear: both;
}
说到网页瘦身，就是把乱七八糟的浮动去掉，让界面美观点。那我给你说说几种方法，删去属性用假元素加上溢出属性，或是试试BFC都可以解决浮动问题~不过，我们在动手之前，得弄清楚哪个方法更合适，这样写代码也就更快了是不是？
掌握几个小技巧就能搞定网页设计中的浮动烦恼这样，网页漂亮又好用，操作起来更顺畅。
看看这个超实用的干货！教你怎样一招搞定那些恼人的CSS浮动问题选哪种办法，你看着办
.parent {
overflow: hidden;
}
.parent {
overflow: auto;
}
.parent {
overflow: scroll;
}
。
评论0