一、浮动(float)的作用
设置了浮动的元素将脱离标准流
二、float的语法
float:left | right；
三、浮动(float)的特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
</head>
<style type="text/css">
.firstBox{
width: 250px;
height: 100px;
background-color: red;
}
.secondBox {
width: 300px;
height: 150px;
background-color: yellowgreen;
}
</style>
<body>
<div class="firstBox">111111111111111111111</div>
<div class="secondBox">222222222222222222222</div>
</body>
</html>
float1.png
现在对代码稍作修改，给类选择器firstBox添加float属性，其余部分保持原样：
.firstBox{
width: 250px;
height: 100px;
background-color: red;
float: left;
}
float2.png
float特点：
- 使用float的元素将脱离标准流不在占用原来的位置（上浮了。。。）
- 几个块级元素（比如div）同时使用float他们将在同一行显示
- float可以把行内元素转为行内块元素
第二个特点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
</head>
<style type="text/css">
.firstBox{
width: 250px;
height: 100px;
background-color: red;
float: left;
}
.secondBox {
float: left;
width: 300px;
height: 150px;
background-color: yellowgreen;
}
</style>
<body>
<div class="firstBox">111111111111111111111</div>
<div class="secondBox">222222222222222222222</div>
</body>
</html>
float3.png
四、浮动(float)用途
利用浮动布局实现图文环绕
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS浮动float属性</title>
<style type="text/css">
img{float:left;}
p{font-size:16px;text-indent:28px;}
div{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div>
<img src="ic_fp_40px.png" alt=""/>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</div>
</body>
</html>
float5.png
float实现导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
background-color: #272822;
}
li {
list-style: none;
float: left;
}
li a {
display: block;
padding: 14px 16px;
color: white;
text-align: center;
text-decoration: none;
}
li a:hover {
background-color: yellowgreen;
color: red;
}
</style>
</head>
<body>
<ul>
<li>
<a href="https://www.baidu.com/">Android开发</a>
</li>
<li>
<a href="https://www.baidu.com/">Android开发</a>
</li>
<li>
<a href="https://www.baidu.com/">Android开发</a>
</li>
<li>
<a href="https://www.baidu.com/">Android开发</a>
</li>
<li>
<a href="https://www.baidu.com/">Android开发</a>
</li>
</ul>
</body>
</html>
float6.png
float网页布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.all {
width: 490px;
height: 350px;
background-color: #458B00;
margin: 0 auto;
}
.header {
height: 25px;
background-color: pink;
}
.content {
height: 300px;
background-color: #46F3B6;
}
.left-content {
width: 50px;
height: 300px;
background-color: #20B2AA;
float: left;
}
.middle-content {
width: 390px;
height: 300px;
background-color: #CBE923;
float: left;
}
.top-content {
height: 150px;
background-color: #55cd0e;
}
.bottom-content {
height: 150px;
background-color: #a4cd0e;
}
</style>
</head>
<body>
<br>
<div class="all">
<div class="header"></div>
<div class="content">
<div class="left-content"></div>
<div class="middle-content">
<div class="top-content"></div>
<div class="bottom-content"></div>
</div>
<div class="right-content"></div>
</div>
</div>
</body>
</html>
float7.png
清除浮动
- 方法一：添加新的元素 、应用 clear：both
clear{
clear:both;
height: 0;
height: 0;
overflow:hidden;
}
- 方法二：父级div定义 overflow: auto
.over-flow{
overflow: auto;
zoom: 1; //处理兼容性问题
}
- 方法三： 伪类 :after 方法 outer是父div的样式
.outer {zoom:1;} /*==for IE6/7 Maxthon2==*/
.outer :after {
clear:both;
content:'.';
display:block;
width: 0;
height: 0;
visibility:hidden;
}
