63讲 导航条css样式
<html>
<head>
<title>导航条</title>
</head>
<style>
*{
margin:0px;
padding:0px;
}
.nav{
/*去除每个<li>前的大圆点*/
list-style:none;
background:blue;
width:1000px;
margin:100px auto;
/*解决高度塌陷*/
overflow:hidden;
}
.nav li{
float:left;
width:25%;
}
.nav li a{
/*<a>是行内元素，必须变为块级元素才能设置宽高*/
display:block;
width:100%;
/*直接设置高度是不行的，文字在垂直方向不会居中*/
/*height:30px;*/
padding:5px 0;
text-align:center;
text-decoration:none;
font-size:bold;
color:white;
}
a:hover{
background:red;
}
</style>
<body>
<ul class="nav" >
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>总结
主要是理解高度塌陷问题的原因，BFC解决方案。行内元素设置宽高要先转为块级元素。
64讲 clear清除浮动
属性值:none,left,right,both 清除左右元素浮动对本元素造成的影响。本讲非常非常重要，建议看视频重新温习。
重点
在这里不要管对其他元素只管对自己本身的影响！！比如：div1左浮动，div2右浮动，div3清除浮动。我们只考虑div3清除浮动的效果，对于div2而言该怎么样怎么样。
both属性
这不是清除两侧的浮动，而是清除对自身元素影响最大的那个元素的浮动影响。
代码
<html>
<head>
<title>导航条</title>
</head>
<style>
*{
margin:0px;
padding:0px;
}
.div1{
width:100px;
height:100px;
background:yellow;
float:left;
}
.div2{
width:200px;
height:200px;
background:blue;
float:right;
}
.div3{
width:300px;
height:300px;
background:green;
clear:both;
}
</style>
<body>
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
</body>
</html>解决高度塌陷问题最终版
利用一个div占位，清除浮动对它的影响从而实现解决高度塌陷的问题，但是此方法会在页面结构中加入一个占位标签，影响源码阅读。
<html>
<head>
<title>导航条</title>
</head>
<style>
*{
margin:0px;
padding:0px;
}
.div1{
border: 4px black solid;
}
.div2{
width:200px;
height:200px;
background:blue;
/*浮动后父元素会塌陷*/
float:left;
}
.clear{
clear:left;/*或者both*/
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
<div class="clear">请你把我删除！【清除div2对我的影响，从而撑开div1达到解决高度塌陷的问题】 请你把我删除！</div>
</div>
</body>
</html>那么如何实现既不添加div又能清除浮动解决高度塌陷呢？
<html>
<head>
<title>导航条</title>
</head>
<style>
*{
margin:0px;
padding:0px;
}
.div1{
border: 4px black solid;
}
.div2{
width:200px;
height:200px;
background:blue;
/*浮动后父元素会塌陷*/
float:left;
}
/*after指的是div1最后的换行或空格区域*/
.div1:after{
/*添加一个内容*/
content:"删除我！！这里content内容可以为空哦！";
clear:left;/*或者both*/
/*转换为块级元素*/
display:block;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>上面的div1:after转换为块级元素原因
经测试，内联元素不能清除浮动带来的影响。文本该怎么环绕还是怎么环绕！
<html>
<head>
<title>导航条</title>
</head>
<style>
*{
margin:0px;
padding:0px;
}
.div1{
width:100px;
height:100px;
background:yellow;
float:left;
}
.clear{
clear:both;
}
</style>
<body>
<div class="div1"></div>
<span class="clear" >行内元素清除浮动没效果，所以上面的div:after必须转换为块元素</span>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。