float及清除浮动

1.float元素有继承属性：inherit.

2.

span{
   width:100px;
  height:100px;
  background:red;
}

文档中不显示，因为span为块状元素，不能设置宽和高。

3.

span{
   width:100px;
  height:100px;
  background:red;
  float：left；
}

此时在文档中显示。因为设置了浮动属性，会让span元素脱离标准文档流。

4. 使用浮动，可能出现的问题：①若父元素未设置高度，则父元素会塌陷，没有高度

                                                   ②网页中的临近元素出现异位。

                      问题解决：

清除浮动 ：https://blog.csdn.net/h_qingyi/article/details/81269667

                                        ①给父元素设置高度

                                        ②给父元素也设置浮动属性

                                        ③通过clear清除内部和外部浮动        （在会被影响的临近元素上设置）clear可以继承。

                                        ④给父元素设置overflow属性，并结合zoom:1使用;   

                                                  overflow:hidden;       

                                                   zoom:1;    (IE专用属性)

                                        ⑤  使用after伪元素清除浮动（推荐使用）

                                        ⑥   使用before和after双伪元素清除浮动

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.content{
  clear:both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>

                                      

清除浮动的方法可以分成两类：

一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素。