Home > Article > Web Front-end > Several methods for clearing floats in HTML
Several methods for clearing floats in HTML
- 不言Original
- 2018-06-25 09:30:222124browse
This article talks about 6 ways to clear the floating HTML elements for your reference. Please see below for details
What will happen when using display: inline-block:
1. Make block elements display in one line
2. Make inline support width and height
3. Line breaks are parsed
4. When not set, the width is Content expansion
5. Support block tags in IE6 and 7
Because the inline-block attribute is parsed when wrapping (there is a gap), the solution is to use float:left/right
Situations that occur when using float:
1. Make the block element display in one line
2. Make the inline element support width and height
3. Do not set the width and height When the width is stretched by the content
4. Line breaks are not parsed (so when using inline elements, you can use floats to clear gaps)
5. Adding floats to elements will break away from the document flow and move in a specified direction. , until it hits the boundary of the parent or another floating element stops (the document flow is the position occupied by the displayable objects in the document when arranged)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p,span{height:100px;background:red;border:1px solid #000; float:left;}
/*
inline-block
1.使块元素在一行显示
2.使内嵌支持宽高
3.换行被解析了
4.不设置宽度的时候宽度由内容撑开
5.在IE6,7下不支持块标签
浮动:
1.使块元素在一行显示
2.使内嵌支持宽高
3.不设置宽度的时候宽度由内容撑开
*/
</style>
</head>
<body>
<p class="p1">p1</p>
<p class="p2">p2</p>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>The following code only floats box1, then box1 and box2 overlap Together. If both are floating, there will be no overlap.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue; /* float:left;*/}
</style>
</head>
<body>
<p class="box1"></p>
<p class="box2"></p>
</body>
</html>Methods to clear floating:
1. Add floats to the parent as well (In this case, when the parent margin: 0 auto; Not centered)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
清浮动
1.给父级也加浮动(不居中了)
*/
</style>
</head>
<body>
<p class="box">
<p class="p"></p>
</p>
</body>
</html>2. Add display:inline-block; to the parent (same as method 1, not centered. Only IE6 and 7 are centered)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
清浮动
1.给父级也加浮动
2.给父级加display:inline-block
*/
</style>
</head>
<body>
<p class="box">
<p class="p"></p>
</p>
</body>
</html>3. Add5394d62b37c0d1016baca90bf99fbfbf94b3e26ee717c64999d7867364b1b4a3
under the floating element .clear{ height:0px;font-size:0;clear:both; }But under IE6, the block element has a minimum height, that is, when height
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
.clear{ height:0px;font-size:0;clear:both;}
/*
清浮动
1.给父级也加浮动
2.给父级加display:inline-block
3.在浮动元素下加<p class="clear"></p>
.clear{ height:0px;font-size:0;clear:both;}
*/
</style>
</head>
<body>
<p class="box">
<p class="p"></p>
<p class="clear"></p>
</p>
</body>
</html>
4. Add 079d205125cc08b5a6372726f48e58b9
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000;}
.p{ width:200px;height:200px;background:red;float:left;}
/*
清浮动
1.给父级也加浮动
2.给父级加display:inline-block
3.在浮动元素下加<p class="clear"></p>
.clear{ height:0px;font-size:0;clear:both;}
4.在浮动元素下加<br clear="all"/>
*/
</style>
</head>
<body>
<p class="box">
<p class="p"></p>
<br clear="all"/>
</p>
</body>
</html> under the floating element. 5. Add {zoom:1;}
:after{content:""; display:block;clear:both;}无标题文档
6. Add overflow:auto;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;border:1px solid #000;overflow:auto;}
.p1{ width:260px;height:400px;background:Red;float:left;}
</style>
</head>
<body>
<p class="box">
<p class="p1"></p>
</p>
</body>
</html> to the parent of the floating element. The above is the entire content of this article. I hope it will be helpful to everyone’s learning. For more related content, please Follow PHP Chinese website!
Related recommendations:
How to use Html to block the right-click menu and left-click swipe function
##About HTML Text formatting code
#
The above is the detailed content of Several methods for clearing floats in HTML. For more information, please follow other related articles on the PHP Chinese website!