CSS布局浮动（2）清除浮动的⽅法—⽹页布局案例⑤给⽗元素设置overflow：
hidde。。。
四、浮动
（案例）⽹页布局案例
➢ 需求：使⽤浮动，完成设计图中布局效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.
top {
/* 宽度⾼度背景⾊ */
height: 40px;
background-color:#333;
}
.header {
width: 1226px;
height: 100px;
background-color:#ffc0cb;
margin:0 auto;
}
.
content {
width: 1226px;
height: 460px;
background-color: green;
margin:0 auto;
}
.left {
float: left;
width: 234px;
height: 460px;
（案例）⼩⽶模块案例
➢
需求：使⽤浮动，完成设计图中布局效果
height : 460px ;
background -color : #ffa500;
}
.right {
float : left ;
width : 992px ;
height : 460px ;
background -color : #87ceeb;
}
/* CSS 书写顺序: 浏览器执⾏效率更⾼
1. 浮动 / display
2. 盒⼦模型: margin border padding 宽度⾼度背景⾊
3. ⽂字样式
*/
</style>
</head>
<body>
<!-- 通栏的盒⼦: 宽度和浏览器宽度⼀样⼤ -->
<div class ="top"></div>
<div class ="header">头部</div>
<div class ="content">
<div class ="left">left </div>
<div class ="right">right </div>
</div>
</body></html>
<!DOCTYPE html >
<html lang ="en">
<head>
<meta charset ="UTF-8">
css去掉滚动条<meta http -equiv ="X-UA-Compatible" content ="IE=edge">
<meta name ="viewport" content ="width=device-width, initial-scale=1.0">    <title>Document</title>
<style>
* {
margin : 0;
margin:0;
padding:0;
}
.box {
margin:0 auto;
width: 1226px;
height: 614px;
/* background-color: pink; */
}
.left {
float: left;
width: 234px;
height: 614px;
background-color:#800080;
}
.right {
float: right;
width: 978px;
height: 614px;
/* background-color: green; */
}
ul {
/* 去掉列表的符号 */
list-style: none;
}
.right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color:#87ceeb;
}
/* 如果⽗级的宽度不够, ⼦级会⾃动换⾏ */
/
* 第四个li和第⼋个li右侧间距清除 */
.right li:nth-child(4n){
margin-right:0;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box {
margin:0 auto;
width: 1226px;
height: 614px;
/* background-color: pink; */
}
.left {
float: left;
width: 234px;
height: 614px;
background-color:#800080;
}
.right {
float: right;
width: 978px;
height: 614px;
/* background-color: green; */
}
ul {
/
* 去掉列表的符号 */
list-style: none;
}
.right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color:#87ceeb;
}
/
* 如果⽗级的宽度不够, ⼦级会⾃动换⾏ */
/* 第四个li和第⼋个li右侧间距清除 */
.right li:nth-child(4n){
margin-right:0;
}
（案例）⽹页导航案例
➢
需求：使⽤浮动，完成设计图中布局效果
</style>
</head>
<body>
<div class ="box">
<div class ="left"></div>
<div class ="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body></html>
<!DOCTYPE html >
<html lang ="en">
<head>
<meta charset ="UTF-8">
<meta http -equiv ="X-UA-Compatible" content ="IE=edge">
<meta name ="viewport" content ="width=device-width, initial-scale=1.0">    <title>Document</title>
<style>
* {
margin : 0;
padding : 0;
}
.nav {
margin : 50px auto ;
width : 640px ;
height : 50px ;
background -color : #ffc0cb;
}
ul {
list -style : none ;
}
.nav li {
float : left ;
}
.nav li a {
/* 1. 浮动 / display */
/* display: inline-block; */
display : block ;
/* 2. 盒⼦模型 */