css学习（五）：浮动、定位、bfc

一、块状元素和内联元素流到页面

1、如果是一个块状元素，浏览器将开辟一个新的行将此元素流入/渲染到页面，如果元素未设置宽度，默认则独占一行；（既两个块状元素换行）

2、将块状元素C流入到页面后，浏览器再将块状元素C中的内联元素默认从左上角开始，从左到右，依次流入到页面（如果元素C内部一行放不完内联元素，将占用更多的垂直空间，放到下一行）；

3、如果流入的元素设置的有clear、float、overflow等属性的时候，浏览器则会先判断再将元素流入到页面。比如一个元素（B）设置了clear属性，此时浏览器将B元素流入到页面的时候，会先注意/判断到元素B的左右两边是否有浮动元素，如果两边有浮动元素，则下移，直到两边没有浮动元素位置。

二、float浮动元素：

1、浮动元素的特性:

• 包裹性：block元素如果不设置宽度，默认宽度则为100%；一旦让此block元素设定了float，宽度则随着内容自适应（这就是通过float元素要手动指定width的原因）
• 父元素塌陷（高度欺骗）性：脱离了文档流，父元素不包含浮动元素（父元素高度不会被浮动元素撑开）；
• 脱离文档流，又不是完全脱离文档流：
• 浮动元素被视作block元素（更像inline-block）。

1. 浮动元素下边是块状block元素：block元素将会占据原先浮动元素所在的位置，但block元素的内容则保留浮动元素的位置；
2. 浮动元素下边是行内inline元素：inline会接着浮动元素显示；
3. 如果浮动元素后面还是浮动，则后面的浮动元素将紧贴着前一个浮动元素横向排列（砌砖头），如果一行宽度不够，则将被挤压到下一行（此时注意，可能有高度不一样，挤压到下一行的浮动元素可能会被卡住阻挡，到不了最左/右边）；

注意浮动内容仍然遵循盒子模型诸如外边距和边界。如果设置一下图片右侧的外边距就能阻止右侧的文字紧贴着图片；

2、浮动元素可能做成的影响:

• 对父元素来说，其父元素的高度计算出现问题（脱离文档流，父元素看不见，不能撑开父元素的高度）
• 对浮动下的元素来说，下边的block元素可能会跑到浮动元素的下边（内容环绕着浮动元素了）;
• 非浮点元素的外边距(margin)不能用于它们和浮动元素之间创建空间；

3、清楚浮动的方法（解决浮动造成的影响）：

• 让父元素拥有BFC特性，如：overflow：hidden；可能会存在内容显示不全的情况；
•  父元素中添加伪元素：clearfix:after{content:"";display:block;height:0;clear:both}     // 这里面又既有concent：“ ” 又有height:0； 主要是因为content:" "为空，有些浏览器不支持；而height：0，又能content内容不显示ÿ