导航条css clear清除浮动解决高度塌陷最终版

gigipop

2019-07-01

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而言该怎么样怎么样。

导航条css clear清除浮动解决高度塌陷最终版

both属性

这不是清除两侧的浮动，而是清除对自身元素影响最大的那个元素的浮动影响。

导航条css clear清除浮动解决高度塌陷最终版

代码

<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>

background css css样式