清除浮动篇
1、为什么要清除浮动？
浮动是魔鬼，fload脱离文档流，但并未脱离文本流，也因其父级无法包裹住。
2、清除浮动的方法有那些？
<1>子元素浮动后，父元素设置与子元素一样的高度
该方法很low，子元素高度变化，需要手动同步修改父元素高度。
<2> 父元素跟着子元素一起浮动
该方法问题很多，如果嵌套的父元素很多，需要一个个添加fload。
<3>在浮动同层级下加一个<div style="clear=both"><div>
这个方法简单粗暴,但会多增加一个dom元素, 在服务器端渲染页面时, 会遇到些麻烦。
<4>在父级使用伪元素
.parent::after {
content: '';
display: table;
clear: both;
原理相当于方案3，相比优点在于不会有多余的DOM，缺点在于不够简单。
<5>直接在浮动的父级元素设置BFC块
.parent{overflow:hidden/auto}
双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通用布局之[双飞翼](Flying Swing Layout)</title>
<style>
html *{padding: 0;margin: 0;}
.nav{list-style-type: none;}
a{text-decoration: none;color: white;}
.nav li{float: left;}
.header .content {width: 1000px;height: 60px;
background-color: black;margin: 0 auto;}
.footer{width: 1000px;height: 60px; background-color: lightgray;margin: 0 auto;}
/*双飞翼布局*/
.container {width: 1000px;margin: 5px auto;background-color: lightgray;
overflow: hidden;/*别忘记最后清除浮动*/}
.wrap{width: inherit;min-height: 600px;background-color:cyan;
}
.left{width:200px;min-height:600px;background-color: lightcoral;
/*重点来了*/
margin-left:-100% /*回到我上的父级最左边*/
}
.right {width: 200px;min-height: 600px;background-color: lightseagreen;
/*重点来了*/
margin-left:-200px /*回到我上的父级最右边,值根据我的width而来决定*/
}
.wrap,.left,.right{float: left;}
.main{
background: pink;
/*该重点真的很重要，用padding把元素内挤出来*/
padding: 0 200px
}
</style>
</head>
<body>
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="">首页</a></li>
<li class="item"><a href="">公司新闻</a></li>
<li class="item"><a href="">最新产品</a></li>
<li class="item"><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">主体内容区</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">
<div class="content">
<p>
<a href="">© PHP中文网版权所有</a> |
<a href="">0551-88889999</a> |
<a href="">皖ICP2016098801-1</a>
</p>
</div>
</div>
</body>
</html>圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通用布局之[双飞翼](Flying Swing Layout)</title>
<style>
html *{padding: 0;margin: 0;}
.nav{list-style-type: none;}
a{text-decoration: none;color: white;}
.nav li{float: left;}
.header .content {width: 1000px;height: 60px;
background-color: black;margin: 0 auto;}
.footer{width: 1000px;height: 60px; background-color:black;margin: 0 auto;}
/*圣杯布局*/
/*圣杯布局的DOM更简单*/
.container{width: 600px;background-color: lightgray;margin: 5px auto;overflow: hidden}
.main{width: inherit;min-height: 600px;background-color: lightcyan;}
.left{width: 200px;min-height: 600px;background-color: lightcoral;margin-left: -100%;position: relative;left: -200px}
.right{width: 200px;min-height: 600px;background-color: lightseagreen;margin-right: -200px}
.main,.left,.right{float: left;}
.container{padding: 0 200px}
</style>
</head>
<body>
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="">首页</a></li>
<li class="item"><a href="">公司新闻</a></li>
<li class="item"><a href="">最新产品</a></li>
<li class="item"><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="main">主体内容区</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">
<div class="content">
<p>
<a href="">© PHP中文网版权所有</a> |
<a href="">0551-88889999</a> |
<a href="">皖ICP2016098801-1</a>
</p>
</div>
</div>
</body>
</html>