# float 布局

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body > * {
        min-height: 100px;
      }
      
      .left {
        float: left;
        width: 300px;
        background: red;
      }
      .right {
        float: right;
        width: 300px;
        background: yellow;
      }
      
      .content {
        background: green;
        margin: auto 300px;
      }
      
    </style>
  </head>
  <body>
    <section class="left"></section>
    <section class="right"></section>
    <section class="content"></section>
  </body>
</html>

优点：

实现简单
兼容性好

缺点：

浮动元素脱离文档流
需要手动清除浮动，如果处理不好容易造成高度塌陷

# 绝对定位布局

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body > * {
        min-height: 100px;
      }
      
      .left {
        position: absolute;
        left: 0;
        width: 300px;
        background: red;
      }
      .right {
        position: absolute;
        right: 0px;
        width: 300px;
        background: yellow;
      }
      
      .content {
        background: green;
        position: absolute;
        left: 300px;
        right: 300px;
      }
      
    </style>
  </head>
  <body>
    <section class="left"></section>
    <section class="right"></section>
    <section class="content"></section>
  </body>
</html>

优点：

简单
兼容性好

缺点：

脱离文档流，子元素也脱离文档流
有效性和可用性比较差

# flex 布局

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		* {
			margin:0;
			padding: 0;
		}

		.layout {
			display: flex;
			height: 200px;
		}

		.left {
			width:300px;
			background: red;
		}

		.right {
			width: 300px;
			background: yellow;
		}

		.content {
			flex: 1;
			background: green;
		}

	</style>
</head>
<body>
	<div class="layout">
		<section class="left"></section>
		<section class="content"></section>
		<section class="right"></section>
	</div>
</body>
</html>

优点：

简单快捷

缺点：

不兼容 IE8 及以下

# 表格布局

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		* {
			margin:0;
			padding: 0;
		}

		.layout {
			display: table;
			min-height: 200px;
			width: 100%;
		}

		.left {
			display: table-cell;
			width:300px;
			background: red;
		}

		.right {
			display: table-cell;
			width: 300px;
			background: yellow;
		}

		.content {
			display: table-cell;
			background: green;
		}

	</style>
</head>
<body>
	<div class="layout">
		<section class="left"></section>
		<section class="content"></section>
		<section class="right"></section>
	</div>
</body>
</html>

优点：

实现简单

缺点：

当其中一个单元格高度超出的时候，两侧的单元格也会跟着一起变高

# grid 布局

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		* {
			margin:0;
			padding: 0;
		}

		.layout {
			display: grid;
			grid-template-columns: 300px auto 300px;
			grid-template-rows: 200px;
		}

		.left {
			background: red;
		}
		.right {
			background: yellow;
		}
		.content {
			background: green;
		}
	</style>
</head>
<body>
	<div class="layout">
		<section class="left"></section>
		<section class="content"></section>
		<section class="right"></section>
	</div>
</body>
</html>

优缺点同 flex

← link和@import.md 两栏布局.md →