web前端开发基础之元素浮动（包括解决父边框塌陷问题）

多的不说，少的不唠

                                                                看完不会你揍我

                                

 接下来上知识点

（1）.display 显示

（2）.block 块

（3）.inline 行内

（4）.inline-block 行内块

（5）.float 浮动块

（6）.Left 左

（7）.right 右

（8）.clear 消除

（9）.both 两者

（10）.overflow 溢出

（11）.hidden 隐藏

浮动的特征：

1.浮动的元素会脱离标准文档流后面的元素会占据它原有的位置

2.浮动的元素会变为行内元素，但是有尺寸当剩余宽度不够的时候会自动换行

3.浮动的元素不会遮盖其他元素，会形成文字环绕的效果

4.浮动的元素会引起“父”边框塌陷

什么时标准文档流？

标准文档流：指元素根据块元素或行内元素得特征按从上到下、从左到右得方式自然排序

注意：块元素可以包含行内元素，行内元素不可以包含块元素。

Display属性：

Block 块元素的默认值 行内元素可以转换为块元素

Inline 行内元素的默认值 块元素可以转换为行内元素

Block-inline 行内块元素，元素既具有内联元素的特性、也具有块元素的特性

None 元素不会被显示

注意：内联元素不能设置高和宽

浮动（float）：

Left 元素向左浮动

Right 元素向右浮动

None 默认值，元素不浮动。

清除浮动（clear）：

注意：在父元素清除

Left 在左侧不允许浮动

Right 在右侧不允许浮动

Both 在左右二侧不允许浮动

None 默认值，允许浮动出现两侧

解决父级边框塌陷的方法：

1. 浮动元素后面加空div
2. 设置父元素的高度
3. 父级添加overflow属性

Overflow属性常用值：

Visible 默认值。内容不会被修剪，会呈现在盒子之外

Hidden 内容会被修剪，并且其余内容是不可见的

Scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

Auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容

清除父级边框塌陷的四种方法：

浮动元素后面加空div：很简单，空div会造成HTML代码冗余

设置父元素的高度：很简单，元素元素固定高度会降低元素可扩展性

父级添加overflow属性：很简单，但是有下拉框的场景不能用

父级添加伪类after：写法比上面复杂，推荐使用

语法：h1：：after{             after表示前面 before表示后面

Content：“”；

Display：block；

Clear：both；

}（推荐使用这个）

inline-block和浮动的区别

Display：inline-block可以让元素排在一行，并且支持宽度和高度，代码实现起来方便，添加该属性的元素在标准文档流中，不需要清除浮动

Float可以让元素排在一行并且支持宽度和高度，可以决定排列方向

缺点如下：

Display：inline-block位置方向不可控制，会解析空格。

Display：inline-block兼容问题

Float浮动以后元素会脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式。

二者结合应用

希望对你们有所帮助！