HTML的五种经典布局⽅式（⼀）
⼀、浮动布局（float布局）（流动布局）（双飞翼布局）
使⽤浮动来完成左中右三栏布局
float:left----左浮动
float:right----右浮动
tip：使⽤float浮动时，margin:0 auto；使块元素居中将会失效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/*设置最⼩⾼度，以免内容为空撑不起来div*/
min-height: 200px;
}
/*左边div的css设置*/
.left{
/*使其左浮动*/
float: left;
width: 300px;
background-color: red;
}
/*右边div的css设置*/
.right{
/*使其右浮动*/
float: right;
width: 300px;
background-color: blue;
}
.center{
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="left">这⾥是左边</div>
<div class="right">这⾥是右边</div>
<div class="center">这⾥是中间</div><!--中间的div必须写在最后，否则右边的div将会在下⾯-->
</div>
<div ></div>
用html设计一个疫情网页代码</body>
</html>
优点：兼容性较好
缺点：浮动会给整体带来较⼤的影响，在宽度不够时，影响布局，⽽且必须先写左右div再写中间div，否则右边div将会挤到下⾯
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.box{
height: 600px;
width: 1200px;
margin: 0 auto;
}
.left{
float: left;
width: 200px;
height: 100%;
background: red;
margin-left: -100%;
}
.
center{
float: left;
width: 100%;
height: 100%;
background: blue;
}
#center_main{
margin: 0px 200px 0px 200px;
}
.right{
float: left;
width: 200px;
height: 100%;
background: red;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center">
<div id="center_main">这是中间500PX</div> </div>
<div class="left">这是左边200PX</div>
<div class="right">这是右边200PX</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。