CSS浮动
2019-09-23 本文已影响0人
瑟闻风倾
float属性的值：
- left：元素向左浮动
- right：元素向右浮动
- none：元素不浮动
- inherit：从父级继承的浮动属性
备注：clear属性可去掉浮动属性。clear的属性值：
- left：去掉元素向左浮动
- right：去掉元素向右浮动
- both：左右两侧均去掉不浮动
- inherit：从父级继承来clear的值
1. 示例
(1) eg1
float.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
style_float.css
#div1{
width: 100px;
height: 100px;
background-color: red;
}
#div2{
width: 100px;
height: 100px;
background-color: blue;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
}
效果1.png
(2) eg2
float.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
style_float.css
#div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#div2{
width: 150px;
height: 100px;
background-color: blue;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
}
备注：红色元素向左浮动。红色遮挡了蓝色，相当于绝对布局，红色脱离了页面，不占有页面位置。
效果2-1.png
style_float.css
#div1{
width: 100px;
height: 100px;
background-color: red;
float: right;
}
#div2{
width: 150px;
height: 100px;
background-color: blue;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
}
备注：红色元素向右浮动。
效果2-2.png
style_float.css
#div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#div2{
width: 150px;
height: 100px;
background-color: blue;
float: left;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
备注：所有元素向左浮动。
效果2-3.png
(3) eg3
float.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
style_float.css
#div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#div2{
width: 150px;
height: 100px;
background-color: blue;
float: left;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
#div{
width: 400px;
height: 500px;
background-color: darkgray;
}
备注：主容器宽度可以承载所有内容。
效果3-1.png
style_float.css
#div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#div2{
width: 150px;
height: 100px;
background-color: blue;
float: left;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
#div{
width: 300px;
height: 500px;
background-color: darkgray;
}
备注：主容器宽度未能承载所有内容。
效果3-2.png
style_float.css
#div1{
width: 100px;
height: 150px;
background-color: red;
float: left;
}
#div2{
width: 150px;
height: 100px;
background-color: blue;
float: left;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
#div{
width: 300px;
height: 500px;
background-color: darkgray;
}
效果3-3.png
(4) eg4
备注：文本继承了父级的浮动属性。float.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
Hello
</div>
</body>
</html>
style_float.css
#div1{
width: 100px;
height: 150px;
background-color: red;
float: left;
}
#div2{
width: 150px;
height: 100px;
background-color: blue;
float: left;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
#div{
width: 300px;
height: 500px;
background-color: darkgray;
}
效果4-1.png
float.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
Hello World
</div>
</body>
</html>
效果4-2.png
float.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
HelloWorld!
</div>
</body>
</html>
效果4-3.png
(5) eg5
备注：去掉继承于父级的浮动属性。float.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="text">HelloWorld!</div>
</div>
</body>
</html>
style_float.css
#div1{
width: 100px;
height: 150px;
background-color: red;
float: left;
}
#div2{
width: 150px;
height: 100px;
background-color: blue;
float: left;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
#div{
width: 300px;
height: 500px;
background-color: darkgray;
}
#text{
clear: left;
}
效果5.png
2. float应用-float属性实现瀑布流布局效果
float_practice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float属性实现瀑布流布局效果</title>
<link href="style_float.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="mydiv">
<ul>
<li><img src="../img/1.jpg"></li>
<li><img src="../img/2.PNG"></li>
<li><img src="../img/3.PNG"></li>
</ul>
<ul>
<li><img src="../img/4.PNG"></li>
<li><img src="../img/5.PNG"></li>
<li><img src="../img/6.PNG"></li>
</ul>
<ul>
<li><img src="../img/7.PNG"></li>
<li><img src="../img/8.PNG"></li>
<li><img src="../img/9.PNG"></li>
</ul>
</div>
</body>
</html>
style_float.css
/*通配符选择器*：所有的标签或元素*/
*{
margin: 0px;
padding: 0px;
}
#mydiv{
width: 950px;
height: auto;
margin: 20px auto;
}
ul{
width: 250px;
float: left;
}
li{
list-style: none;
}
img{
width: 200px;
height: 200px;
}
通配符选择器*： 所有的标签或元素
auto ： 自适应
瀑布流效果布局.png
