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>