Home >Web Front-end >HTML Tutorial >css float_html/css_WEB-ITnose
我在项目的实践中遇到了这样的一个问题
<div class="main"> <p>aaaa</p> <p>bbbb</p> </div>
* { padding: 0; margin:0;}p { padding-left: 30px;}.main { background: green;}
上面的效果是这样的
我想让父元素div 里面的两个p元素通过float到同一行
我添加了这样一句话
.mian p { float:right; }
我理所应当 异想天开的以为会是这样的结果
结果是这个样子的
为了更好的说明这个问题,也是我刚在疑惑的地方 我又将页面父div下面增加了一个div
<div class="main"> <p>aaaa</p> <p style="clear:right">bbbb</p> </div> <div>cccc</div>
也就是我总体的想实现是这样的一个布局
结果我通过上面的那一点css 是这样的一个效果
我在实际遇到这个问题是在上面那个父div并没有设置背景色 我通过审查元素看到那个div的高度变成0了 我也不是很明白为什么下面的div会挤上去 应为两个div是块级元素,不会向上浮动的
原来float会造成一个塌陷的问题 当我们没有为父元素设置高度的时候 ,并且父元素只包含浮动元素的时候 就会产生塌陷这种问题 就是父元素的高度变成0
通过查找资料和学习我发现
可以为父元素设置overflow:hidden
这样的情况下父元素就会自动扩展来包含他里面的浮动元素了,并且下面的div也自动的到下面去了
其实如果我们可以通过简单的clear设置来消除float的设置
clear:both 清除两边的浮动
clear:right 清除右边的浮动
clear:left 清除左边的浮动
例如上面的问题 我可以下面那个div 也就是并没有设置float的元素设置clear:both 这样他就不会飘上去了
上面的我并没有为上面的div设置overflow:hidden 只是让下面那个div clear:both
还有一种方法是在清除浮动元素之后通过css伪类:after添加一个不可见的内容 在它的上面clear:both
上面加黑的就是两种清除浮动的方式
也解决了我的问题 拿来分享出来