HTML、CSS知识点,面试开发都会需要--No.4 内容布局

No.4 内容布局

---

1.列举场景

同一行布局三个元素。三个元素等比显示，并且其他元素不会围绕这三个元素。如下要让下面的三个column等比显示在一行：

2.通过Float属性实现

（1）float:left, 对于块级别的div可设置float:left让几个元素同行显示。但需要阻止其他元素追尾。

（2）解决追尾方案一：在Column3的后面添加一个div，并设置css属性:clear:both。这个大家应该都很熟悉。

（3）解决追尾方案二：设置容器的公共class样式，设置class的before和after伪类，但需要考虑兼容性。所以完整的解决方案代码如下：

.group:before,
.group:after{
    content: "";
    display:table;
}

.group:after{
    clear:both;
}

.group{
    clear:both;
}

3.通过设置display为inline-block实现

（1）display为inline-block的元素不会占满一行，所以设置三个column的display为inline-block可是三个元素同行显示。但linline-block元素之间会存在空白，需要解决存在的空白。

（2）解决空白方案一：把每一个新的inline-block元素的闭环tag和下一个开环tag放在一行。代码如下：

<section>
...
</section><section>
...
</section><section>
...
</section>

（3）解决空白方案二：在闭环tag的后面添加一个打开的注释标签，在下一个开环tag的后面添加一个关闭注释的标签。代码如下：

<header>...</header>
<section>
  ...
</section><!--
--><section>
  ...
</section><!--
--><section>
  ...
 </section>
 <footer>...</footer>