Two ways to clear float in HTML
|
1. Clear floating method 1 Set the height of the previous parent element. Note: In enterprise development, do not write the height if you can.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D131_ClearFloat</title>
<style>
.smallbox1{
width:100px;
height:100px;
background-color: red;
body:3px solid black;
margin:5px;
float:right;
}
.smallbox2{
width:100px;
height:100px;
background-color: red;
body:3px solid black;
margin:5px;
}
.smallbox3{
width:100px;
height:100px;
background-color: red;
body:3px solid black;
margin:5px;
}
.smallbox4{
width:100px;
height:100px;
background-color: red;
body:3px solid black;
margin:5px;
}
.smallbox5{
width:100px;
height:100px;
background-color: red;
body:3px solid black;
margin:5px;
}
.smallbox6{
width:100px;
height:100px;
background-color: red;
body:3px solid black;
margin:5px;
}
.bigbox1,.bigbox2{
/*width:400px;*/
/*width:400px;*/
background-color: green;
border:3px black solid;
}
</style>
</head>
<body>
<div class="bigbox1">
<div class="smallbox1"></div>
<div class="smallbox2"></div>
<div class="smallbox3"></div>
</div>
<div class="bigbox2">
<div class="smallbox4"></div>
<div class="smallbox5"></div>
<div class="smallbox6"></div>
</div>
</body>
</html>
2. The second way to clear floating Add the clear attribute to the following attributes Clear attribute value: None: Default value, sorting is done according to the sorting rules for floating elements (left floating finds left floating, right floating finds right floating) left: Do not look for the previous left floating element right: Do not look for the previous right floating element both: Do not look for the previous left floating and floating elements For example, if we do not set the width and height of the large box, the small box will support the large box, but the two large boxes will be on the same line.
.smallbox1{
width:100px;
height: 100px;
float:left;
background-color: red;
border:2px solid black;
}
.smallbox2{
width:100px;
height: 100px;
float:left;
background-color: red;
border:2px solid black;
}
.smallbox3{
width:100px;
height: 100px;
float:left;
background-color:blue;
border:2px solid black;
}
.smallbox4{
width:100px;
height: 100px;
float:left;
background-color: blue;
border:2px solid black;
}
</style>
</head>
<body>
<div class="bigbox1">
<div class="smallbox1"></div>
<div class="smallbox2"></div>
</div>
<div class="bigbox2">
<div class="smallbox3"></div>
<div class="smallbox4"></div>
</div>
</body>
We use the clear attribute on the third box so that it can be put on a new line (the fourth box doesn’t need it because we want the third box to be next to the fourth box). We only need to modify the code of the third box.
.smallbox3{
clear:left;
width:100px;
height: 100px;
float:left;
background-color:blue;
border:2px solid black;
}
Note: The margin attribute is invalid. We will talk about how to fix it next time. 3. Source code: D131_ClearFloat.html D132_CLearAttribute.html address: https://github.com/ruigege66/HTML_learning/blob/master/D131_ClearFloat.html https://github.com/ruigege66/HTML_learning/blob/master/D132_CLearAttribute.html Summarize The above are two of the ways to clear HTML floats that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: A brief talk on responsive design
>>: Sample code for implementing DIV suspension with pure CSS (fixed position)
Recommend
Common usage of regular expressions in Mysql
Common usage of Regexp in Mysql Fuzzy matching, c...
jQuery implements simple pop-up window effect
This article shares the specific code of jQuery t...
CSS3 realizes the mask barrage function
Recently I saw a barrage effect on B station call...
Solve the problem that shutting down Tomcat using shutdown.bat will shut down other Tomcats
The shutdown.bat file has a sentence if not "...
Vue improves page response speed through lazy loading
Table of contents Overview What is lazy loading? ...
How to recover files accidentally deleted by rm in Linux environment
Table of contents Preface Is there any hope after...
jQuery implements time selector
This article example shares the specific code of ...
JavaScript flow control (branching)
Table of contents 1. Process Control 2. Sequentia...
CSS imitates Apple's smooth switch button effect
Table of contents 1. Code analysis 2. Source code...
Summary of common Mysql DDL operations
Library Management Create a library create databa...
Using react-beautiful-dnd to implement drag and drop between lists
Table of contents Why choose react-beautiful-dnd ...
Simple implementation of mini-vue rendering
Table of contents Preface Target first step: Step...
Detailed explanation of MySQL multi-version concurrency control mechanism (MVCC) source code
Table of contents 1. Introduction 2. MVCC (Multi-...
mysql5.7.18.zip Installation-free version configuration tutorial (windows)
This is the installation tutorial of mysql5.7.18....
Detailed explanation of Angular routing sub-routes
Table of contents 1. Sub-route syntax 2. Examples...