有关浮动需要注意的一些问题

在页面布局中，我们已经学会了使用浮动让元素在一行上显示。但是关于浮动，我们还是需要注意一些问题。

浮动的元素具有行内块元素的特性

当给某一个元素设置了浮动以后，不管该元素属于什么类型，都会具备行内块元素的特性。这是浮动具备的特性之一。

行内元素的大小不能直接设置，只能由内容撑开，但是一旦给这些元素设置了浮动，便可以直接设置元素的大小

 a {
     float: left;
     width: 200px;
     height: 40px;
     background-color: pink;
     margin: 0 10px;
   }

浮动元素会脱离标准的文档流

这也是浮动的一大特性之一。脱离标准文档流的意思是不在遵循标准流的规则上下排列了，而是左右横向排列。一旦给元素设置了浮动，它将不再页面中占据原来的位置，而是将位置空出，后面的元素会自己补上去。

浮动元素引起的高度塌陷

有些嵌套结构的盒子，父元素的高夫是由子元素撑开的，在一些特殊的情况下，子元素又不得不使用浮动，此时的父元素高度就变为了0，出现这样的情况并不奇怪，因为这正是由于浮动盒子脱标所造成的。

对于上面的这种情况，会经常发生，解决的办法也有很多，这里就介绍一段清除浮动的代码：

/* 通过伪元素的形式 添加清除浮动的元素 */
      .box::after {
        /* 伪元素必须的属性 */
        content: '';
        /* 伪元素是行内元素 将其转换为块级元素 */
        display: block;
        /* 清除两边的浮动 */
        clear: both;
    }

.box为父盒子，为其添加伪元素用于清除浮动的影响。

这样就不会影响到后面盒子的布局啦。

浮动元素能产生文字环绕的效果

浮动元素后面的元素被覆盖，但是里面的文字不会被覆盖。