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

Home

Web Front-end

HTML Tutorial

Several methods for clearing floats in HTML

不言

Jun 25, 2018 am 09:30 AM

clear float

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Dead Rails - How To Tame Wolves

3 weeks ago By DDD

Blue Prince: How To Get To The Basement

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1653

CakePHP Tutorial

1413

Laravel Tutorial

1306

PHP Tutorial

1251

C# Tutorial

1224

Related knowledge

How to align input boxes in html Apr 05, 2024 am 10:18 AM

Methods of using HTML to align input boxes include: using the text-align attribute to specify left, right, or center to align the text of the input box. Use the float property to float the input box to the left or right side of the page to affect its relative alignment.

Is there any way to clear floats? Feb 22, 2024 pm 04:00 PM

Is there any method to clear floats? Specific code examples are required. In web page layout, floats are a common layout method that allows elements to break away from the document flow and be positioned relative to other elements. However, a problem often encountered when using floating layout is that the parent element cannot wrap the floating element correctly, causing the page to have a disordered layout. Therefore, we need to take measures to clear the float so that the parent element can wrap the floated element correctly. There are many ways to clear floats. The following will introduce several commonly used methods and give specific code examples.

What are the 5 ways to clear floats? Nov 20, 2023 pm 04:27 PM

The five ways to clear floats are: 1. Use the clear attribute; 2. Use the overflow attribute; 3. Use the pseudo element clearfix; 4. Use flex layout; 5. Use grid layout. Detailed introduction: 1. Use the clear attribute, which is the most commonly used method to clear floats. You can add an element after the floating element and add the "clear: both;" style to it; 2. Use the overflow attribute to set the parent element Set "overflow: auto;" and so on.

What is layout layout? Feb 24, 2024 pm 03:03 PM

Layout refers to a typesetting method adopted in web design to arrange and display web page elements according to certain rules and structures. Through reasonable layout, the webpage can be made more beautiful and neat, and achieve a good user experience. In front-end development, there are many layout methods to choose from, such as traditional table layout, floating layout, positioning layout, etc. However, with the promotion of HTML5 and CSS3, modern responsive layout technologies, such as Flexbox layout and Grid layout, have become

Why floated elements cannot be cleared by overflow property Jan 27, 2024 am 08:08 AM

To analyze why floating cannot be cleared using the overflow attribute, specific code examples are required. Introduction: In web page layout, problems with floating elements are often encountered. In order to solve the impact of floating elements, we usually use a method of clearing floats. However, sometimes we find that floats cannot be cleared well using the overflow attribute. This article will delve into this issue and provide specific code examples. 1. Why do we need to clear floats? Floating elements means taking the element out of the document flow by setting the float attribute.

What are the ways to clear floats in css Oct 30, 2023 am 11:57 AM

The ways to clear floats in CSS include clear attribute, overflow attribute, clearfix class, clearfix class of parent element, pseudo-element to clear float, overflow attribute of parent element, and combination of clear attribute and BFC. Detailed introduction: 1. Use the clear attribute, a simple and commonly used method to clear floats. By adding an empty block-level element after the floating element and setting the clear attribute for it, you can clear the previous floating effect and make it The elements below are laid out normally and so on.

The role of float in css Apr 28, 2024 pm 01:51 PM

The float property in CSS allows elements to break out of the document flow and line up along the edge of their parent element, and is used to create and align text images, floating menu sidebars, and overlapping elements. The attribute values of floating elements include left (left float), right (right float), none (clear float), and inherit (inherit). To prevent a floated element from causing the parent element to overflow, you can use the clearfix technique to add an empty element and clear the float.

CSS Floats and Clear Floats: Mastering Floats and Clear Floats Nov 18, 2023 am 10:56 AM

CSS floating and clearing floats: Mastering the skills of floating and clearing floats requires specific code examples. In web design and development, CSS floats (float) are one of the common layout techniques. You can use float to move elements to the left or right to adjust and arrange the elements on the page. However, floating elements can also cause some problems on the page, such as the height of the parent element collapsing, etc. Therefore, it is very important to master the skills of using floats and clearing them. This article will focus on CSS floats and clear float techniques, and provide specific

See all articles