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)
![html page!--[if IE]...![endif]--Detailed introduction to usage](/upload/images/67cac79a26784.webp)
Recommend
Detailed graphic tutorial on installing and uninstalling Tomcat8 on Linux
[ Linux installation of Tomcat8 ] Uninstall Tomca...
In-depth understanding of the specified IE browser rendering method
<meta http-equiv="X-UA-Compatible" c...
Using JS to implement a simple calculator
Use JS to complete a simple calculator for your r...
Make your website automatically use IE7 compatibility mode when browsing IE8
Preface To help ensure that your web pages have a ...
Analysis of Vue element background authentication process
Preface: Recently, I encountered a management sys...
CSS description of the implementation code for displaying text at the end of the horizontal progress bar
Problem Description I want to achieve the followi...
How to change apt-get source in Ubuntu 18.04
When using apt-get to install, it will be very sl...
Keepalived+Nginx+Tomcat sample code to implement high-availability Web cluster
Keepalived+Nginx+Tomcat to achieve high availabil...
Markup language - web application CSS style
Click here to return to the 123WORDPRESS.COM HTML ...
JavaScript+html implements random QR code verification on front-end pages
Share the cool front-end page random QR code veri...
Solution to the error reported by Mysql systemctl start mysqld
Error message: Job for mysqld.service failed beca...
How to solve the 2002 error when installing MySQL database on Alibaba Cloud
The following error occurred while installing the...
Perfect solution to the problem of MySQL shutting down immediately after startup (caused by ibdata1 file corruption)
The mysql on a server in the computer room had be...
30 excellent examples of color matching in web design
Today, this article has collected 30 excellent cas...
Solution to Linux not supporting all commands
What should I do if Linux does not support all co...