块元素&内联元素

块元素浮动特性

1.块元素特点：块元素的width宽度默认为父元素的100%
2.块元素特点：块元素无论是否设置长宽高，都各自占据一行
3.当块元素脱离文档流，高度和宽度为被内容撑开
4.示例：

块A为浮动元素，块B为不浮动的元素，则块B中的文字会环绕浮动
元素块A

 

内联元素

5.内联元素不设置宽高，即使设置也无效，长宽是被内容撑开
6.内联元素开启浮动，脱离文档流之后，会变成块元素，可以设置长宽高

7.当一个元素浮动脱离文档流之后，下边的元素会向上移动，占据浮动元素原来的位置（显示在下层）
8.示例：块A为不浮动元素，块B为浮动的元素，AB为兄弟元素，则B不会浮动超过A元素

9.示例：块A（上）为浮动元素，块B（下）为浮动的元素，AB为兄弟元素，则B不会浮动超过A元素

10.
元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
* 元素浮动以后，会尽量向页面的左上或这是右上漂浮，
* 直到遇到父元素的边框或者其他的浮动元素
* 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
* 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
*/
11.在文档流中，父元素的高度默认是被子元素撑开的

解决由于元素浮动而产生的高度塌陷问题

原理：
根据W3C的标准，在页面中元素都有一个隐含的属性：Block Formatting Context
简称BFC，该属性可以设置打开或者关闭，默认是关闭
当开启元素的BFC，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素

* 如何开启元素的BFC
1.设置元素浮动
- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block
- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。

/*overflow: hidden;*/

 

但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，
该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
开启方式很多，我们直接使用一种副作用最小的：
直接将元素的zoom设置为1即可

zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
zoom这个样式，只在IE中支持，其他浏览器都不支持