使块元素并排显示和清除浮动的方法

Posted 2020-08-16 ljuyi

使多个块元素并排显示：

①inline-block:内敛块，不占一行，但可以设置宽高属性，将块元素的display设置为inline-block，可以让多个div块横向显示。但是该用法下多个块之间会出现空格，是由于相邻两个</div>与<div>之间的换行符引起的，空格的清除办法：

①去掉换行符（不推荐）：页面不美观
②注释（不推荐）:将换行部分注释掉
③将上一行的>移到下一行（不推荐）:页面不美观
④将要并排显示的div添加父元素，并且给父元素div添加属性:font-size:0;(但该种方法会有一系列并发问题需要改正)

②浮动：

文档流：自上而下解读文档时，文档是以流状的状态。

要并排显示的块元素设置属性：float:left/right，即让块元素脱离文档流漂浮起来，实际上并没有占父元素的空间，只是显示出来而已，使块元素按照浮动方向移动，遇到父元素或相邻元素边界就停住。如代码:

.son{
    width:100px;
    height:100px;
    background-color:red;
    }
<div>
    <div class="son"></div>
<div>

该代码中实际父元素的height为子元素的height，独占一行。如果加入该属性，见代码：

.son{
    width:100px;
    height:100px;
    background-color:red;
    float:left;
    }
<div>
    <div class="son"></div>
</div>

则父元素的height还是为0,且独占一行，所以子元素并没有在父元素中，只是向垂直于我们视线的方向上平移了。

清除浮动： 若没有清除浮动则实际上看到有元素的位置上其实没有元素，其他元素还是会占该位置，所以需要清除浮动。

①overflow:hidden(还有其他属性值：scroll、auto)

hidden可以清除浮动，还可以使溢出父元素的子元素的溢出部分隐藏

②;：可以清除浮动但会加入空标签

③（推荐）在父元素内加入下列属性：

.clearfix:before,.clearfix:after{
    display:table;
    content:""; <!--该属性只有在该伪类下可以使用-->
    }
.clearfix:after{
    clear:both;
    }
.clearfix{
    *200m:1;
    }