<h2></h2>asdasdas d

2343543

45245254

11111klnlk

llll...

本节有一问题，li首页 会因为上面logo 撑开而使得“首页”不能置首。

看了logo图片以后发现logo图片高度为80px，而logo样式高度也设为了80px。

现在水平不够只能提醒自己之后的实践中布局时，样式高度要稍微设置大一点点。

----------------------------------------

2020.8.18

今天发现了把html声明改成与老师的一致就不会出现上述的情况， 看来是和html版本有关。

div浮动后，因无内容无height，一般会不显示。要想无内容显示出来需要设定height就ok了。

 0

错位

解决办法：.nav{}中加入 clear:both;

原理？？？

div浮动后，因无内容无height，一般会不显示。要想无内容显示出来需要设定height就ok了。

关于解决由于浮动导致的一些不理想页面效果显示，

比如由于设置了父类盒子logo的高度为80px导致下面的盒子nav中的效果无法正常显示，为了解决这个问题，可以采用不设定logo类的高度，而是采用在logo的盒子中增多一个clearfloat的盒子，并设定这个clearfloat盒子中的clear:both,比如，

.clearfloat{

clear:both;

height:0;

overflow:hidden;

}

或者直接在logo类里面增多一个语句overflow:hidden,

这个原理涉及到BFC原理，

相关解释，https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

导航栏制作：左边导航列表，右边搜索框。

清除父级浮动

clear:both;

div中对css设置样式

圆角：border-radius:5px;

div 中想套用同一套css时可以采用连写

.nav-left，.nav_mid

{}

导航栏盒子模型细分

导航内容盒子模型

导航栏分类

妈蛋搞了两个小时，还以为出bug了！T T

nav左部分独占一行的原因 ：

上面logo_left的img将logo_left的高度多撑开了4px，使得下面nav_left不能正确float：left。

至于为什么img会多撑开几个像素的空白：

img作为内联元素，会和文字一样具有行高和字号属性，默认对齐baseline.通过截图可以看到，nav部分实际高是83px>80px，溢出了。 

解决方案有： 以下四种（根据情况任选其一）： 

1、.logo加上overflow:hidden; 

2、.logo_left img 设置display:block; 

3、.logo_left img 设置vertical-align:middle/bottom/top 都可以；*

4、.logo_left 设置 font-size:0; *

*vertical-align：top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline 与 bottom 之间的距离也变为0，那道空白也就不见了。如果没有设置 line-height，line-height 的默认值是基于 font-size 的，视渲染引擎有所不同，但一般是乘以一个系数（比如1.2）。因此，在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然，这样做的后果就是不能图文混排了。

作者：尤雨溪
链接：https://www.zhihu.com/question/21558138/answer/18615056
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

vertical-align 属性设置元素的垂直对齐方式。

说明

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

nav部分占两行的问题 原因：img作为内联元素，会和文字一样具有行高和字号属性，默认对齐baseline.通过截图可以看到，nav部分实际高是83px>80px，溢出了。 解决方案有以下四种（根据情况任选其一）： 1、.logo加上overflow:hidden; 2、.logo_left img 设置display:block; 3、.logo_left img 设置vertical-align:middle/bottom/top 都可以。 4、.logo_left 设置 font-size:0;