前端布局对前端开发而言是必不可少的环节之一。我所理解的前端布局可以分成两个大类，第一类是元素层面的布局，就是像absolute布局、flex布局等等，都是描述元素在页面上以何种形式呈现，即局部的布局；第二类是网页层面的布局，像静态布局、响应式布局等，都是描述同一个网页在不同的设备上的呈现形式，即整体的布局。接下来就详细整理一下这两大类布局。
首先是第一类，总体上可以大致分为文档布局、浮动布局、定位布局三种，他们注重的是如何实现某些元素在页面上的呈现形式。
一、文档布局：首先我们要知道，默认的网页形式是文档流的形式，一个网页就像是一条条从左流向右的河流。在文档中有两种元素，内联元素（display:inline）和块级元素（display:block）。内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。而块级元素则会独占一行，按照从上往下的方式布局。内联元素的宽度和高度默认都被内容撑开。
二、浮动布局：浮动布局是我们最常用的布局，其表现形式为float:left;。其特点是，浮动元素会脱离文档流。我们可以很清晰地看到，通过float的方式，使元素脱离了文档流，变为行内块元素（display:inline-block），这个元素对于文档流的子元素而言就像内联元素一样，会占用自己大小的空间，而对于容器元素而言又像是不存在一样，会悬浮在文档流的上方。
这种方式虽然能够较好地实现我们想要的一些效果，但是很容易引起一个问题，那就是父类高度塌陷。在文档流中，父类的高度是会被子类撑开的，而用浮动布局后，如果浮动元素的高度大于子元素的高度，则父元素不会被浮动元素撑开，浮动元素则会继续覆盖在下一个元素上。我们可以通过下面的例子来理解。
<style>
.container{
width: 200px;
background-color:red;
}
.left{
background-color: yellow;
float: left;
height: 50px;
width:50px;
}
.right{
background-color: yellow;
float: right;
height: 50px;
width:50px;
}
</style>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="container" style="height: 200px;background: blue">
</div>
</body>
最低0.47元/天 解锁文章
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
