CSS之简谈常见布局 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第3天。

前言

前端工程师生产出来的产品终究是要展现到用户的眼前的。而布局的含义就是规定什么东西要布置到什么地方。在CSS中，基于不同的属性可以实现不同的布局方式，在今天，我们就来介绍三种非常常见并且易于实现的布局方式。

浮动布局

正如同其名字一般，浮动布局使元素脱离了文档流，使得元素浮动在了页面上。

这样做的有点在于，在图文混排时，这样做可以使文字环绕在图片周围，同时浮动布局还有另外一个特性，那就是：元素浮动之后会获得块级元素的性质，这样可以对元素进行更多的设置。

浮动布局也有一个十分明显的缺点，因为元素脱离了文档流，这样该元素就无法支撑起父元素，就会照成被称为高度塌陷的问题。

浮动前

浮动后

为了解决高度塌陷的问题，有以下几种解决方案

• 结尾添加空标签，为其设置clear：both，因为空div没有浮动，所以可以撑开父元素的高度，但是这样做添加了无意义的标签。
• 用伪类选择器::after清除浮动，这种方法何添加一个div的原理是一样的，并且没有添加多余的div。

flex弹性盒布局

这是css3中新增加的一种布局模式，它能够扩展和收缩flex容器内地元素，以最大限度地填充可用空间。

这种布局的好处是能够自适应屏幕的大小，对于移动端的开发十分方便。

需要注意的是，设置了flex属性之后，float属性会失效。

Grid栅格布局

这个布局的特点是通过网格先来把网页划分为行和列，这样做是直观地把网页进行了二维的划分，从而使得布局得到了直观的展示

总结

不同的布局方式有着不同的特点，对于布局的选择要考虑到项目的特点以及程序员自身的熟练度，适合的布局方式才是最好的布局方式。