CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。
正常布局流
正常布局流，即我们所说的文档流，是原生的、未经人为刻意控制的浏览器默认的HTML布局排版方式。
“霸道”的块级元素，从上往下，另起一行；“温柔”的内联元素（最常见的文字），从左到右依次紧挨着排布。一个元素的性格是“霸道”或是“温柔”，通常出生时便已确定，但我们可以刻意地通过display属性的设置来“调教”它的性格，亦霸道（display:block），亦温柔（display:inline），亦或霸道兼温柔（diaplsy:inline-block）。
浮动
通常元素默认是不浮动的，即浮动属性为none。使用浮动的“调教”后，我们便能让两个块级元素从默认的垂直布局变为水平布局。
注意：子元素设置float属性后，通常需要在其父元素设置清除浮动的样式，即在父元素添加一个.clearfix的类，样式为
.clearfix::after{
content: '';
display: block;
clear: both;
}
这样，如果那个元素需要清除浮动，直接多加一个.clearfix的类名即可，一劳永逸。这里利用的伪元素的一些特性。
左右布局
1. 简单的左右布局
HTML代码
<body>
<div class="father clearfix">
<div class="left">我在左</div>
<div class="right">我在右</div>
</div>
</body>
CSS样式
.father{
border:1px solid black;
}
.left{
background:red;
width:40%;
float:left;
}
.right{
background:yellow;
width:40%;
float:right;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
效果
如果父元素没有添加.clearfix类，则会出现父元素没有高度的bug，如图
2. 左侧固定，右侧自适应布局（float + margin）
2.1 左侧左浮动，右侧设置margin-left
html代码
<body>
<div class="left"></div>
<div class="main"></div>
</body>
CSS代码
.left{
width:200px;
height:100px;
background:#abcdef;
float:left;
}
.main{
height:100px;
background:#777;
margin-left:200px;
}
2.2 利用浮动和负外边距来进行左边固定右边自适应的布局，与上面有些许不同，可以仔细琢磨下两这有何区别
html
<body>
<div class="left"></div>
<div class="wrap">
<div class="main"></div>
</div>
</body>
CSS
.left{
width:200px;
height:100px;
background:#abcdef;
float:left;
margin-right:- 200px; /*如果不设置负右外边距，.warp会被挤到下一行；设置多大呢？绝对值大于等于左边栏目宽度即可*/
}
.wrap{
width:100%;
height:100px;
background:#777;
}
.main{
margin-left:200px; /*等于左边栏的宽度*/
background:orange;
height:100%;
}
效果
这里第二部分用了一个div进行包裹，如果不是很好理解，可以粘贴代码到js.bin看看效果，然后打开开发者工具进行调试。
左中右布局
左中右布局的实现由很多种，大体可分为传统的浮动+margin和绝对定位+margin，现代比较“潮”的flex弹性盒子布局，以及科技含量更高的Grid布局。
- 浮动+margin
- 绝对定位+margin
- flex弹性盒子
- Grid栅格
浮动+margin
左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应三栏布局。
这种布局需要注意主体main标签必须放在最后，左右随意，一定要注意div书写的顺序。
html代码
<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>
CSS代码
html,body{
margin:0;
height:100%;
}
#main{
height:100%;
margin:0 210px;
background:#ffe6b8;
}
#left,#right{
width:200px;
height:100%;
background:#a0b3d6;
}
#left{
float:left;
}
#right{
float:right;
}
效果
浮动+margin负值法
首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动，内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100% margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。
html
<body>
<div id="main">
<div id="body"></div>
</div>
<div id="left"></div>
<div id="right"></div>
</body>
CSS
html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
#left{margin-left:-100%;} /*本来在屏幕外，通过负外边距想坐移了一个屏幕的宽度*/
#right{margin-left:-200px;} /*同上，本来自屏幕外，向左移了自身宽度的长度*/
这种方法较难理解，推荐动手利用开发者工具调试调试。
绝对定位+margin
左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。div顺序没有要求。
html
<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>
CSS
html,body{
margin:0;
height:100%;
}
#left,#right{
position:absolute;
top:0;
width:200px;
height:100%;
}
#left{
left:0;
background:#a0b3d6;
}
#right{
right:0;
background:#a0b3d6;
}
#main{
margin:0 210px;
background:#ffe6b8;
height:100%;
}
在用绝对定位时，通常会在其父元素使用相对定位，即position:absolute和position:relative是成对出现的，两者相辅相成。
flex布局
给父元素（Flex容器）设置 display:flex；子元素（Flex项目）会默认排成一行，通过设置容器或项目的各种属性来改变项目布局的方式。
.father{
display: flex;
justify-content:space-between;
}
限于知识水平，这里只做简要介绍，详情请查阅 flex
参考博文：张鑫旭
网友评论