奇怪的float

我在项目的实践中遇到了这样的一个问题

<div class="main">
        <p>aaaa</p>
        <p>bbbb</p>
</div>

* {
　　padding: 0;
　　margin:0;
}
p {
　　padding-left: 30px;
}
.main {
	background: green;

}

上面的效果是这样的

我想让父元素div 里面的两个p元素通过float到同一行

我添加了这样一句话

.main p {
            float:left;
        }

我理所应当 异想天开的以为会是这样的结果

结果是这个样子的

为了更好的说明这个问题，也是我刚在疑惑的地方 我又将页面父div下面增加了一个div

<div class="main">
        <p>aaaa</p>
        <p>bbbb</p>
    </div>
    <div>cccc</div>

也就是我总体的想实现是这样的一个布局

结果我通过上面的那一点css 是这样的一个效果

我在实际遇到这个问题是在上面那个父div并没有设置背景色 我通过审查元素看到那个div的高度变成0了  我也不是很明白为什么下面的div会挤上去 应为两个div是块级元素，不会向上浮动的

原来float会造成一个塌陷的问题 当我们没有为父元素设置高度的时候 ，并且父元素只包含浮动元素的时候 就会产生塌陷这种问题 父元素无法通过布局的方式获得高度，所以高度为0

2016 8 13 关于布局的一些学习  参考   浏览器工作原理

在进行布局的时候，浏览器采用一种dirty位系统，如果某个呈现器（需要渲染布局的元素）发生了更改，将其自身或者子代标记为dirty，则需要布局，在进行布局的时候，元素会确认自己宽度和高度

布局模式：

（1）父呈现器确认自己的宽度

（2）父呈现器依次处理子呈现器

　　2.1 放置子呈现器（设置x y 坐标）

　　 2.2 如果有必要，调用子呈现器的布局

（3）父呈现器根据子呈现器的累加高度以及边距和补白的高度来设置自身高度，此值也可供父呈现器的父呈现器使用

（4）将dirty设置为false

解决方案：清除浮动：

2016 6 23

为了防止内容流过浮动元素 比如你不希望一个元素的左边是浮动元素 就可以通过clear：left来实现

1）加一个空的div

<div style="clear:both;"></div>

2016 8 22 clear的工作原理  在

2）可以为父元素设置overflow：hidden; zoom :1

这样的情况下父元素就会自动扩展来包含他里面的浮动元素了，并且下面的div也自动的到下面去了（之所以这样的设置是因为让父元素表现的更像一个容器生成了一个BFC，会扩展 包裹性） zoom属性是按比例缩放的  zoom:1 按原始比例缩放  父元素就会包裹子元素   IE下触发了Layout

3）还有一种方法是在需要清除浮动元素之后通过css伪类：after添加一个不可见的内容 在它的上面clear：both 

2016.3.17  刚看到大漠老师翻译的一篇文章   把伪类的清除浮动的方案优化下  成如下的形式

.main::after,.main::before {
　　content:'';
　　display:table;
　　clear:both;
}

这就是我解决浮动这个问题的学习过程 拿来分享

2016 5 19 在面试中被问到BFC，在学习的过程中发现BFC中有一条规则就是在计算BFC的高度的时候，浮动元素也会被计算在内 这就说明了在包含浮动元素的父元素中设置overflow：hidden 生成BFC去包裹浮动元素的原理

2016 6 23  更新一些关于float的一些原理的东西  CSS权威指南  css脱离文档流 知乎上的回答  关于CSS中浮动元素脱离普通流问题

浮动是一种脱离文档流，对之后或者之前的盒子中的content flow产生影响的一个属性(区别于定位  例如position absolute 也是脱离文档流 但是它不会对之后之前的盒子产生影响)

首先浮动元素会生成一个块级框 即使它本身是一个行内元素

规则:

1) 浮动元素的左右外边界不能超出其包含块的左右内边界

2）浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动的(或右浮动)元素的右（或左)边界，除非后出现的浮动元素的顶端在先出现浮动元素的底端下面（防止浮动元素之间的覆盖）

3）左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边 右浮动元素的左外边界不会在其左边左浮动元素的右外边界的左边

4）一个浮动元素的顶端不能比其父元素的内顶端更高   浮动元素的顶端不能比之前所有的浮动元素的顶端或块级元素更高

上面的例子中三个元素均为浮动元素 由于规则3的作用 第二个元素不能跟第一个元素占据同一行(包含块宽度的限制)  我们看到第三个元素的顶端跟第二个元素的顶端一样

5）如果源文档中一个浮动元素之前出现了另一个元素 浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高

6) 左浮动元素必须向左尽可能的远 右浮动元素必须向右尽可能的远 位置越高 就会向左或者向右尽可能的远

上面是浮动的一些规则 下面说一下行为

（1）当父元素是定高的时候 里面的浮动元素的高度超出了父元素的高度 

上面的例子中浮动元素的高度就超出了父元素的高度 之前的规则只进行了浮动元素的上 左右与包含块的边界的限制 在权威指南上说浮动会延伸，也就是在超出高度的浮动元素的包含块上也设置浮动 让它去包裹父元素  其实这是一种生成BFC的模式 BFC在计算高度的时候会包含浮动元素的高度 所以父元素会扩展

关于BFC的: BFC神奇背后的原理  请移步这位园友的blog 看了很多遍

（2）负外边距 

通过设置浮动元素的负外边界可以实现浮动元素的外边界超出包含块外边界的情况(不要采取这种模式) 无法得知浏览器的预期行为

（3）浮动元素与正常内容流重叠的情况

行内框与一个浮动元素重叠的时候，其边框 背景 和内容都在该浮动元素之上显示

块框与一个浮动元素重叠时候 其边框和背景在该浮动之下显示 内容在浮动元素之上显示