float 浮動
浮動主要解決排版的問題 如何清除浮動 1. 在父元素內添加一個空的塊，並且加上clear:left/right,,,,,,,,使用空的塊來拉升父元素的高度 2.在叔叔的下面添加clear:both.
浮動演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style>
#d0 {
width: 400px;
border: 1px solid red;
}
p {
width: 400px;
border: 1px solid red;
}
#d0 div {
width: 100px;
height: 100px;
margin: 10px;
}
#d1 {
background-color: red;
}
#d2 {
background-color: green;
}
#d3 {
background-color: blue;
}
/*浮動*/
#d1,#d2,#d3 {
float: left;
}
/*消除浮動影響*/
/*1.消除對叔叔的影響*/
p {
/*clear: left;*/
}
/*2.消除對父親的影響*/
#d0 #d4 {
height: 0;
clear: left;
}
</style>
</head>
<body>
<div id="d0">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
<p>浮動的元素海拔更高</p>
</body>
</html>
清除 li 標簽下的小 黑點 是 style="list-style:none"
a 標簽下當 鼠標懸停的時候有顯示內容 是在a 標簽內添加title 屬性。
float 浮動