摘要：<!--CSS基礎--><!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS中的浮動</title><link rel="shortcut icon" type="images/x-icon&q
<!--CSS基礎-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS中的浮動</title>
<link rel="shortcut icon" type="images/x-icon" href="images/logo.jpg">
<link rel="stylesheet" type="text/css" href="css/index.css">
<style type="text/css">
*{padding:0px;margin: 0px;}/*瀏覽器自帶邊距清零*/
ul li{list-style: none;width: 100px; height: 40px; line-height: 40px; text-align: center; background-color: #ccc;margin: 0px 1px;float: left;}
.box1{width: 100px; height: 40px; background-color: pink; line-height:40px; text-align:center; float: left; margin: 0px 2px;position: relative;}
.clear{clear: both;}/*清除浮動*/
.box2{width: 100px; height: 40px; background-color: pink; line-height:40px; text-align:center; float: right; border: 1px solid #ccc; border-radius: 10px; margin: 0px 5px;}
.box2:hover{background-color: red;}
.to_bottom {
width: 0;
height: 0;
border-top: 10px solid skyblue;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.box1 ul{display: none; }
.box1:hover ul{display: block;background-color: #6C6C6C;}
.box1 ul li:hover{background-color: #f5f5f5;}
</style>
</head>
<body>
<!--<div class="clear"></div>-->
<div class="box1">HTML<div class="to_bottom" style="display: inline-block;"></div>
<ul>
<li>html5</li>
<li>css3</li>
<li>xml</li>
</ul>
</div>
<div class="box1">jQuery<div class="to_bottom" style="display: inline-block;"></div>
<ul>
<li>javaScript</li>
<li>DOM</li>
<li>Ajax</li>
</ul>
</div>
<div class="box1">PHP</div>
<div class="box2">登錄</div><div style="float: right; width: 2px; height: 40px; line-height:40px; text-align:center; margin: 0px 5px;"><span>/</span></div><div class="box2">注冊</div>
<div class="clear"></div>
<div style="width: 100%; margin: 0 auto; height: 80px; background-color: #088;"></div>
</body>
</html>
您好，請問一下：為什么使用div的時候，沒有設置position也不會出現ul 會擠壓后邊的父親元素后邊的div呢？
批改老師：查無此人批改時間：2019-04-26 13:26:25
老師總結：完成的不錯，可以把常用的樣式單獨寫一個文件。繼續(xù)加油。 有問題提交工單，作業(yè)里你無法追問。