浮动
float
属性样式
none不浮动left向左浮动right向右浮动
清除浮动
clear
元素浮动引起父元素塌陷，影响布局效果。
clear属性
属性样式
none无控制left左侧不允许浮动right右侧不允许浮动both两侧都不允许浮动
overflow属性 设置元素不够容纳内容时的显示方式。
属性样式
auto自动添加滚动条hidden隐藏超出的内容scroll一直显示滚动条
常用技巧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
</title>
<style>
.box {
border: 1px solid red;
}
.left {
width: 200px;
height: 200px;
background: yellow;
float: left
}
.right {
width: 200px;
height: 200px;
background: green;
float: right;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
</title>
</head>
<style>
.container {
border: 1px solid red;
width: 800px;
margin: 0px auto;
overflow: hidden;
}
.center {
float: left;
background-color: yellow;
width: 100%;
}
.left {
float: left;
background-color: green;
width: 200px;
margin-left: -100%;
}
.right {
float: left;
background-color: pink;
width: 200px;
margin-left: -200px;
}
.content {
margin: 0px 200px;
}
</style>
<body>
<div class="container">
<div class="center">
<div class="content">edge
</div>
</div>
<div class="left">left
</div>
<div class="right">right
</div>
</div>
</body>
</html>
Processed:
0.009, SQL:
10
