Several methods for clearing floats in HTML-HTML Tutorial-php.cn

Several methods for clearing floats in HTML

不言

Release： 2018-06-25 09:30:22

Original

2151 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

3. Add

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<19px, the default is 19px. The solution: font-size:0; or overflow:hidden;

<!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>

Copy after login

4. Add

<!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>

Copy after login

under the floating element. 5. Add {zoom:1;}

to the parent of the floating element.

:after{content:""; display:block;clear:both;}

Copy after login

无标题文档

Copy after login

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>

Copy after login

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!