浮动与清除
如何让父元素围住浮动元素
- 父元素添加overflow:hidden
- 父元素添加folat
- 加一个空元素,给空元素加clear,添加虚拟尾元素
#div1::after{
content:"."
clear:both;
visibility:hidden;
height:0;
}
基于浮动元素的demo
三栏都是固定宽度的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基于浮动的布局DEMO</title>
<style>
*{margin: 0;padding: 0;}
div{
width: 1000px;
margin: 0 auto;
background: lightgray;
overflow: hidden;
}
#p1{
width: 150px;
height: 800px;
background-color: red;
float: left;
}
#p2{
width: 600px;
height: 800px;
background-color: blue;
float: left;
margin-right: 10px;
}
#p3{
width: 230px;
height: 800px;
background-color: lightblue;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="a">
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
</div>
</body>
</html>
中间栏自适应宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基于浮动的布局DEMO</title>
<style>
*{margin: 0;padding: 0;}
div{
width: 100%;
background: lightgray;
overflow: hidden;
}
#p1{
width: 150px;
height: 800px;
background-color: red;
float: left;
}
#p2{
width: auto;
height: 800px;
background-color: blue;
margin-left: 160px;
margin-right: 240px;
}
#p3{
width: 230px;
height: 800px;
background-color: lightblue;
float: right;
}
</style>
</head>
<body>
<div class="a">
<p id="p1">p1</p>
<p id="p3">p3</p>
<p id="p2">p2</p>
</div>
</body>
</html>