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 

上面加黑的就是两种清除浮动的方式

 

也解决了我的问题 拿来分享出来