Summary of Css methods for clearing floats
|
Float is often used in web page layout, but the floating block-level elements are out of the standard document flow, which makes the parent element of the floating element have no height, resulting in the parent element having no height, so it is necessary to clear the impact of float on the parent element. This article introduces several methods to clear float. Several ways to clear the floating effect: Set the height of the parent element Effect picture:
Code:
<style>
* {
padding: 0;
margin: 0;
}
.header {
height: 30px;
line-height: 30px;
background-color: #333;
}
.header a {
color: #fff;
text-decoration: none;
}
ul {
float: right;
}
li {
float: left;
list-style: none;
padding-right: 20px;
}
</style>
<div class="header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Questions and Answers</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">About</a></li>
</ul>
</div>External wall method: Use a blank block-level element to add the CSS style clear to clear the float Note: Block-level elements with the clear style cannot have margin attributes added Effect picture:
Code:
<style>
* {
padding: 0;
margin: 0;
}
.header {
/* background-color: #333; */
}
.header a {
/* color: #fff; */
text-decoration: none;
}
ul {
float: right;
}
li {
float: left;
list-style: none;
padding: 5px 20px;
}
.clearfix {
height: 10px;
background-color: red;
clear: both;
}
.main {
color: #fff;
height: 100px;
background-color: blue;
}
</style>
<div class="header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Questions and Answers</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="clearfix"></div>
<div class="main">Main content</div>Inner wall method: Use a blank block-level element to add the CSS style clear to clear the float Effect picture:
Code:
<style>
* {
padding: 0;
margin: 0;
}
.header {
background-color: #333;
}
.header a {
color: #fff;
text-decoration: none;
}
ul {
float: right;
}
li {
float: left;
list-style: none;
padding: 5px 20px;
}
.clearfix {
clear: both;
}
</style>
<div class="header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Questions and Answers</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">About</a></li>
</ul>
<div class="clearfix"></div>
</div>The interior wall method has relative advantages over the exterior wall method: After the inner wall method is set, the parent element of the floating element will be stretched, that is, the height Add overflow:hidden to the parent element of the floating element Original meaning: Remove hidden content, and hide all content that overflows the border. Effect picture:
Code:
<style>
* {
padding: 0;
margin: 0;
}
.header {
background-color: #333;
overflow: hidden;
}
.header a {
color: #fff;
text-decoration: none;
}
ul {
float: right;
}
li {
float: left;
list-style: none;
padding: 5px 20px;
}
.main {
color: #fff;
height: 100px;
background-color: blue;
}
</style>
<div class="header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Questions and Answers</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="main">Main content</div>Summarize The above is a summary of the Css methods for clearing floating introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Summary of React's way of creating components
>>: How to view the IP address of Linux in VMware virtual machine
Recommend
Docker Basic Tutorial: Detailed Explanation of Dockerfile Syntax
Preface Dockerfile is a script interpreted by the...
Installing linux7.2 Internet access configuration tutorial on VMware virtual machine under win7
Install linux7.2 Internet access configuration on...
Vue implementation counter case
This article example shares the specific code of ...
The difference between html empty link href="#" and href="javascript:void(0)"
# contains a location information. The default anc...
Win10 64-bit MySQL8.0 download and installation tutorial diagram
How do I download MySQL from the official website...
Nginx handles http request implementation process analysis
Nginx first decides which server{} block in the c...
Scoring rules of YSlow, a webpage scoring plugin developed by Yahoo
YSlow is a page scoring plug-in developed by Yaho...
How to install and deploy MySQL 8.0 under CentOS8
MySQL 8 official version 8.0.11 has been released...
How to implement DIV's blur function
Use anti-shake to make DIV disappear when the mou...
MySQL 8.0.15 winx64 installation and configuration method graphic tutorial
This article shares the installation and configur...
Solution to forgetting the administrator password of mysql database
1. Enter the command mysqld --skip-grant-tables (...
Code analysis of synchronous and asynchronous setState issues in React
React originated as an internal project at Facebo...
Grid systems in web design
Formation of the grid system In 1692, the newly c...
How to use binlog for data recovery in MySQL
Preface Recently, a data was operated incorrectly...
Example code for inputting the license plate number and province abbreviation in html
The principle is to first write a div with a butt...