弹性布局-浮动布局
2018-06-15 本文已影响0人
半瓶不满
浮动布局
浮动布局的核心就是让元素脱离普通流,然后使用width/height,margin/padding将元素定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrap {
background-color: #D66464;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}
.left {
float: left;
width: 100px;
background: #00f;
height: 180px;
}
.right {
float: right;
width: 150px;
background: #0f0;
height: 200px;
}
.center {
background: #FFFFFF;
margin-left: 110px;
margin-right: 160px;
height: 150px;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="left">left,宽度固定,高度可固定也可以由内容撑开。</div>
<div class="right">right,宽度固定,高度可固定也可以由内容撑开。</div>
<div class="center">center,可以自适应浏览器宽度,高度可固定也可以由内容撑开。</div>
</div>
</body>
</html>
效果图
1.jpg
原理非常简单,左右侧边栏定宽并浮动,中部内容区放最后不浮动、默认width:auto并设置相应外边距,让左右侧边栏浮动到上面。注意:子元素设置为浮动之后,父对象的高度就坍塌了,需要设置父对象后的元素清除浮动,这样父对象的高度才能被浮动子元素撑起来了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrap {
background-color: #FBD570;
margin-left: 100px;
margin-right: 150px;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}
.left {
float: left;
width: 100px;
background: #00f;
height: 180px;
margin-left: calc(-100% - 100px);
}
.right {
float: right;
width: 150px;
background: #0f0;
height: 200px;
margin-right: -150px;
}
.center {
background: #B373DA;
height: 150px;
float: left;
width: 100%;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="center">center,可以自适应浏览器宽度,高度可固定也可以由内容撑开。</div>
<div class="left">left,宽度固定,高度可固定也可以由内容撑开</div>
<div class="right">right,宽度固定,高度可固定也可以由内容撑开</div>
</div>
</body>
</html>
效果图
2.jpg思路:
1)既然HTML里面要让center放前面,为了让left跑到center前面,那center也必须浮动了,否则因为都是块元素他们会分两行。
2)浮动之后还要让center宽度自适应,那明显width只能100%,然后在父元素中设width:auto,还有两侧margin,其实也就是父对象宽度自适应,center只是继承content的宽度。
3)对left使用负的margin让他们浮动到上方去。
两种发放多少有一点区别,另外就是calc()函数。
总结:使用浮动来进行布局,一个比较大的问题是清除浮动。这个可以使用一个after伪类来清除。更大的问题是浮动性像水一样向上流动,难以把握。在元素较多而且元素高度尺寸不一的情况下,单纯使用浮动只能实现上端对齐,这对于适应多种设备的布局就显得力不从心了。目前的做法是牺牲一部分内容,将元素做成等高排列,从美观上看也当然也是极好的,比参差不齐的排列要美观。