CSS——浮動demo
阿新 • • 發佈：2017-11-06
就是 pre padding log images auto back 技術分享 介紹
float作用就是在於布局，首先要介紹的是文檔流（標準流），之後是浮動布局。
文檔流：元素自上而下，自左而右，塊元素獨占一行，行內元素在一行上顯示，碰到父集元素的邊框換行。
浮動布局：
1、float: left | right
2、元素浮動之後不占據原來的位置（脫標）
3、浮動的盒子在一行上顯示
4、行內元素浮動之後轉換為行內塊元素。（不推薦使用，轉行內元素最好使用display: inline-block;
浮動作用：
1、文本饒圖
2、導航制作
3、網頁布局
?文本饒圖：這裏有個十分特殊的知識點，就是當紅色的div浮動以後，雖然p元素也是塊狀元素，但是p標簽並沒有往上頂到紅色的div下。這是因為float當初被開發出來就是為了解決文字環繞的問題。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box1 {
width: 400px;
height: 500px;
background-color: yellow
}
.box2 {
width: 200px;
height: 200px;
background 效果：
?導航制作：之前制作導航都是將文字放置於一個div中，然後設置它們的a標簽為行內塊。現在直接設置li為浮動就行了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
.nav{
width: 800px;
height: 40px;
background: pink;
margin: 20px auto;
}
.nav ul li{
float: left;
}
.nav ul li a{
display: inline-block;
height: 40px;
font: 14px/40px 微軟雅黑;
padding:0 20px;
text-decoration: none;
}
.nav ul li a:hover{
background: #aaa;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">14期威武</a></li>
</ul>
</div>
</body>
</html>
效果：
CSS——浮動demo