当前位置: 老葡京网站娱乐 > 网页设计 > Css教程 > 正文

CSS浮动的特殊情况

时间:2016-08-05 本站 乖兔快跑

老葡京网站娱乐 www.sdguanhua.com 如果浮动元素的高度不同,则当它们向下移动时,可能会被其它浮动元素“卡住”。

例:

html文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS左浮动的例子</title>
<link rel="stylesheet" style="text/css" href="test1.css" />
</head>
<body>
<div class="box">
<div class="div1">div1</div>
<div class="div1" id="special">div2</div>
<div class="div1">div3</div>
<div class="div1">div4</div>
<div class="div1">div5</div>
<div class="div1">div6</div>
</div>
</body>
</html>

CSS文件:

.box{
width:600px;
height:400px;
border:1px solid gray;
}
.div1{
width:100px;
height:100px;
border:1px solid blue;
margin-top:5px;
background-color:pink;
float:left; /*左浮动*/
margin-right:5px;
}
#special{
height:110px;
}

效果如下图:

本文地址:http://www.sdguanhua.com/web/Css/201608/50307.htm