怎么解决css浮动?

html-css013

怎么解决css浮动?,第1张

使用float来使层浮动起来,使用clear:both来清除浮动,一般情况下在一个div中,会有三个层,第一个层左浮动,第二个层右浮动,第三个层用来清除浮动。最外层的层要使用:overflow:hidden来使外边框达到内层浮动层的高度。

你没有清除浮动,导致浮动元素脱离文档流,浮动的父元素没有被撑开。解决方法:清除浮动即可。

.one .bottom{ width: 1000px height: 200px } 

.one .bottom .part1{ float: left width: 250px height: 200px text-align: center } 

.one .bottom .part2{ float:left width: 250px height: 200px text-align: center }

/*清除浮动*/

.bottom:after{

    content:""

    display:table

    clear:both

}

试试看,能不能解决你的问题。

不知道怎么说清楚..举例来说明吧...~

有以下代码~

<div id="a">a</div>

<div id="b">b</div>

在元素的自然流下~~a层将和b层一上一下~~

加入我们想实现a b层并列的效果~~那么就需要将a b 浮动~

但是假如下面还有一个C层~~由于a b层浮动了~c层也将环绕在a b层周围~

但是如果我们想让c层在a b层下面出现~那就需要清理浮动~恢复页面元素的自然流~浮动并不是清理自身的浮动的效果~而是清理上面接触到的浮动元素的浮动~使浮动元素后面的元素不接受它们的浮动~按照正常的元素流进行布局....

因此清理浮动和浮动并不矛盾~

清理浮动有很多方法~

可以用clear:(left right both)~个人比较喜欢用overflow来清理浮动~

你可以搜一下一篇叫 清理浮动全家 的文章~~比较全面的介绍了各种清理浮动的方法~