版权声明：随意转载嘿嘿，加一个说明就行 https://blog.csdn.net/qq_30386541/article/details/86759691
浮动与清除
1.文字环绕图片:
实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
p {margin:0; border:1px solid red;}
img {float:left; margin:0 4px 4px 0; width: 100px; height: 100px;}
</style>
</head>
<body>
<img src="1.jpg" title="测试图片">
<p>Message boxes. When using software......</p>
</body>
</html>
效果:
2.分栏
实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
p {float:left; margin:0; width:200px; border:1px solid red;}
img {float:left; margin:0 4px 4px 0; width: 100px; height: 100px;}
</style>
</head>
<body>
<img src="1.jpg" title="测试图片">
<p>Message boxes. When using software......</p>
</body>
</html>
效果：
3.浮动对文档的影响
原始界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
section {border:1px solid blue; margin:0 0 10px 0;}
p {margin 0;}
img{width: 200px; height: 200px;}
footer {border:1px solid red;}
</style>
</head>
<body>
<section>
<img src="1.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element that runs across the bottom of the
page.</footer>
</body>
</html>
效果:
现在想要让图片下方的文字显示在图片的右边，我们让图片浮动:
img{float: left; width: 200px; height: 200px;}效果:
我们可以看到，section不再包围浮动元素了，它只包围非浮动的p元素。 footer 被提了上来，紧挨着前一个块级元素section。
如果我们想让section依旧包围浮动的元素在里面，可以使用以下的三种方法:
1.为父元素添加 overflow:hidden
样式：
<style type="text/css">
section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;}
p {border:1px solid red;}
img{float: left; width: 200px; height: 200px;}
footer {border:1px solid red;}
</style>
2.同时浮动父元素
样式:
<style type="text/css">
section {border:1px solid blue; float:left; width:100%;}
p {border:1px solid red;}
img{float: left; width: 200px; height: 200px;}
footer {border:1px solid red;}
</style>
3.添加非浮动的清除元素
1.在 HTML 标记中添加一个子元素，并给它应用clear 属性
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
section {border:1px solid blue;}
.clear_me {clear:left;}
img{float: left; width: 200px; height: 200px;}
footer {border:1px solid red;}
</style>
</head>
<body>
<section>
<img src="1.jpg">
<p>It's fun to float.</p>
<div class="clear_me"></div>
</section>
<footer> Here is the footer element that runs across the bottom of the
page.</footer>
</body>
</html>
2.给父元素添加一个类(clearfix)
eg:给父元素section添加一个类(clearfix)
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
section {border:1px solid blue;}
img{float: left; width: 200px; height: 200px;}
footer {border:1px solid red;}
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
</style>
</head>
<body>
<section class="clearfix">
<img src="1.jpg">
<p>It's fun to float.</p>
<div class="clear_me"></div>
</section>
<footer> Here is the footer element that runs across the bottom of the
page.</footer>
</body>
</html>
效果：
