这次我们继续总结CSS主流布局中的两列布局的方式和原理。
首先讲一下什么是两列布局。
两列布局一般情况下时指定宽与自适应布局，两列中的左列是确定宽度，右列是自动填满剩余所有空间的一种布局效果。
float + margin
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left, .right {
height: 300px;
}
.left {
width: 300px;
background-color: red;
float: left;
}
.right {
background-color: aliceblue;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">左：定宽</div>
<div class="right">右，自适应</div>
</div>
</body>
</html>
|
原理
float
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。
浮动元素是 float 的计算值非 none 的元素。
由于float意味着使用块布局，它在某些情况下修改display 值的计算值：
具体会修改成什么可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/float
优点
实现方式简单
缺点
自适应地margin值必须与定宽元素的宽度相同。
定宽元素的浮动与自适应元素的不浮动在老版本浏览器中会出现显示问题。
当浮动元素中的子元素利用clear清除浮动时，会出现显示问题。
改进
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left, .right {
height: 300px;
}
.left {
width: 300px;
background-color: red;
float: left;
position: relative;
}
.right-fix {
float:right;
width: 100%;
margin-left: -300px;
background-color: pink;
}
.right {
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">左：定宽</div>
<div class="right-fix">
<div class="right">右，自适应</div>
</div>
</div>
</body>
</html>
|
改进后的版本可以解决第二和第三个缺点
float + overflow
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left, .right {
height: 300px;
}
.left {
width: 300px;
background-color: red;
float: left;
}
.right {
overflow: hidden;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">左：定宽</div>
<div class="right">右，自适应</div>
</div>
</body>
</html>
|
原理
overflow
CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。
这个选项包含剪切，显示滚动条，或者显示 从容器溢出到周围区域的内容。
指定除visible(默认值)以外的值将创建一个新的 块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会在每个滚动步骤后强行重新包装内容，从而导致慢滚动体验。
为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。
优点
第一种方案中的所有问题都没有
缺点
overflow属性不仅开启了BFC模式，但也同时设置了内容溢出的情况
display：table
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
display: table;
table-layout: fixed;
width: 100%;
}
.left, .right {
display: table-cell;
height: 300px;
}
.left {
width: 300px;
background-color: red;
}
.right {
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">左：定宽</div>
<div class="right">右，自适应</div>
</div>
</body>
</html>
|
原理
display：table
These elements behave like HTML table elements. It defines a block-level box.
table-layout
table-layout CSS属性定义了用于布局表格单元格，行和列的算法。
大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。
使用 “fixed” 布局方式时，整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出。
优点
兼容性好
缺点
会受到table的制约