关于浮动的问题

<!DOCTYPE html>

<html>

<head>

.div1{

width: 100%;

height: 300px;

}

.div2{

margin: 0 auto;

width: 600px;

background: #ccc;

}

.div2 li{

float: left;

}

</style>

</head>

<body>

<ul>

<li>huiche</li>

</ul>

</div>

</body>

</html>

为什么给 li 设置浮动后，div的背景颜色没效了。而给li设置display:inline-block的话div的背景颜色却能显示出来

慕粉3204329

浏览 1270回答 1

1回答

慕数据5775487

是因为受到浮动影响，li设置浮动后就脱离了正常文档流，相当于DIV2里面没了内容，无法撑开造成的，可以给DIV2也设个高度，你可以F12看一下DIV2的高度是不0？没有高度当然看不到背景颜色了！给li设置display:inline-block的话div的背景颜色却能显示出来是因为li元素没有脱离正常文档流，并且li里面是有内容的，能够撑开DIV2, 因此也就能看到背景颜色了！！

随时随地看视频慕课网APP