09css之浮动、标准文档流、dispaly属性、块元素排在一行、清除浮动、解决父级边框塌陷、nline-block和float的区别

本文链接： https://blog.csdn.net/Denial_learn/article/details/100361789

标准文档流；

标准文档流组成
块级元素（block）

<h1>…<h6>、<p>、<div>、列表

内联元素（inline）

<span>、<a>、<img/>、<strong>...

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

dispaly属性：
在这里插入图片描述

block、inline：块级元素与行级元素的转变
inline-block：控制块元素排到一行
none：控制元素的显示和隐藏

块元素排在一行：

inline-block
float

float属性：
在这里插入图片描述

清除浮动：

clear属性：
在这里插入图片描述

解决父级边框塌陷：

浮动元素后面加空div
设置父元素的高度
父级添加overflow属性
父级添加伪类after

浮动元素后面加空div：

示例：

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
  <div class="clear"></div>
</div>
.clear{  clear: both;  margin: 0; padding: 0;}

设置父元素的高度：

示例：

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>
#father {height: 400px; border:1px #000 solid; }

父级添加overflow属性：

示例：

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>
#father {overflow: hidden;border:1px #000 solid; }

其中，overflow属性
在这里插入图片描述

父级添加伪类after：

示例：

<div id="father" class="clear">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>
.clear:after{
    content: '';          /*在clear类后面添加内容为空*/
    display: block;      /*把添加的内容转化为块元素*/
    clear: both;         /*清除这个元素两边的浮动*/
}

总结，以及优缺点：

清除浮动，防止父级边框塌陷的四种方法

浮动元素后面加空div

简单，空div会造成HTML代码冗余
设置父元素的高度

简单，元素固定高会降低扩展性
父级添加overflow属性

简单，下拉列表框的场景不能用
父级添加伪类after

写法比上面稍微复杂一点，但是没有副作用，推荐使用

nline-block和float的区别：

display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE 6、IE 7上不支持
float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

09css之浮动、标准文档流、dispaly属性、块元素排在一行、清除浮动、 解决父级边框塌陷、nline-block和float的区别