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
Solve the problem of MYSQL connection port being occupied and introducing file path errors
This morning I planned to use Wampserver to build...
mysql create database, add users, user authorization practical method
1. Create a MySQL database 1. Create database syn...
Design Association: Why did you look in the wrong place?
I took the bus to work a few days ago. Based on m...
Linux uses suid vim.basic file to achieve privilege escalation
Reproduce on Kali First set suid permissions for ...
Getting Started Tutorial for Beginners ⑨: How to Build a Portal Website
Moreover, an article website built with a blog pro...
In-depth discussion on auto-increment primary keys in MySQL
Table of contents Features Preservation strategy ...
How to disable IE10's password clear text display and quick clear function
IE10 provides a quick clear button (X icon) and a ...
Solve the problem of docker's tls (ssl) certificate expiration
Problem phenomenon: [root@localhost ~]# docker im...
Solve the problem of inconsistent front and back end ports of Vue
Vue front and back end ports are inconsistent In ...
React hooks pros and cons
Table of contents Preface advantage: shortcoming:...
Detailed explanation of the problem of mixed use of limit and sum functions in MySQL
Preface Today, after synchronizing the order data...
Detailed explanation of 4 common data sources in Spark SQL
Generic load/write methods Manually specify optio...
Docker-compose installation yml file configuration method
Table of contents 1. Offline installation 2. Onli...
Detailed tutorial on building a JMeter+Grafana+Influxdb monitoring platform with Docker
We all know that Jmeter provides native result vi...