Detailed explanation of four solutions to floating problems in CSS layout
|
1. Cause:
The effect after the subbox is set to float:
It can be seen that after the blue box is set to float, it cannot support the height of the parent box because it is out of the standard document flow, causing 2. Solution:
(1) Set the parent box to a fixed height
Although setting a fixed height for the parent box can temporarily solve our problem, it is not flexible. If the height requirements of the child box change in the future (in many places on the web page), we will have to manually change the height of the parent box. It is not easy to maintain later. Application: Fixed height area of boxes in web pages, such as fixed navigation bars. Disadvantages: inflexible to use and difficult to maintain later (2) Internal wall method Add an empty block-level element (usually a div) after the floating element, and set The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Floating elements are destructive</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: green;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="child">Son</div>
<div class="clearfix"></div>
</div>
</body>
</html>Application: There are not many applications on the web page, just to guide the next way to clear the floating. Disadvantages: Structural redundancy (3) Pseudo-element removal method The inner wall method is to add an empty block-level element (usually a div) after the floating element, and set Well, there happens to be a selector in the CSS3 attribute usage that completely meets this usage, the pseudo-element selector. It's like a pseudo-class, in that pseudo-elements have added selectors, but instead of describing a special state, allow styling certain parts of an element.
It means adding styles at the end of the p tag element, which also conforms to the usage of the inner wall method. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Floating elements are destructive</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: green;
}
.cleafix:after{
content:'.';
display: block;
clear: both;
overflow: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child">Son</div>
</div>
</body>
</html>When you need to clear the float in the future, you only need to add a "clearfix" class to the tag. It is very convenient and quick! Explanation of the pseudo-element removal method:
.clearfix:after{
content:''; means adding a content to the .clearfix element, and the content is an inline element.
display: block; sets the element to a block-level element, which complies with the requirements of the interior wall law. (table is used in some places because table is also a block-level element)
clear: both; Method to clear floats. You must write overflow: hidden; If you use display:none;, then the element cannot be a block-level element. overflow:hidden; means a hidden element, but the element takes up space; while display:none; does not take up space.
height: 0;
}Here is the difference between :after (pseudo-class) and ::after (pseudo-element) Similarities
Differences
Notice
(4) overflow: hidden The overflow CSS property defines what to do when an element's content is too large to fit in its box. It is a shorthand property for overflow-x and overflow-y.
The overflow property can not only achieve the above effects, but also when an element is set with overflow:hidden|auto|scroll properties, it will form a BFC area, which we call BFC is just a rule. It is important for floating positioning. Float positioning and clearing floats only apply to elements in the same BFC. Floating will not affect the layout of elements in other BFCs, while clearing floats can only clear the floats of elements in front of it in the same BFC.
Advantages: concise code Disadvantages: When the content increases, it is easy to cause the content to be hidden due to the failure of automatic line wrapping, and the overflowing elements cannot be displayed. Summary: As long as we let the parent box form the area of the BFC, it will automatically clear the influence of floating elements in the area. Which will form the BFC area:
This concludes this article on four solutions to floating issues in CSS layout. For more relevant CSS layout floating content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
>>: Detailed explanation of Javascript event capture and bubbling methods
Recommend
Use of kubernetes YAML files
Table of contents 01 Introduction to YAML files Y...
What are the advantages of using B+Tree as an index in MySQL?
Table of contents Why do databases need indexes? ...
Workerman writes the example code of mysql connection pool
First of all, you need to understand why you use ...
Summary of MySQL lock related knowledge
Locks in MySQL Locks are a means to resolve resou...
Recommended tips for web front-end engineers
Let's first talk about the value of web front...
Docker builds kubectl image implementation steps
If the program service is deployed using k8s inte...
VUE implements token login verification
This article example shares the specific code of ...
MySQL 8.0.22 winx64 installation and configuration graphic tutorial
mysql 8.0.22 winx64 installation and configuratio...
HTML tags: sub tag and sup tag
Today I will introduce two HTML tags that I don’t...
MySQL 4 common master-slave replication architectures
Table of contents One master and multiple slaves ...
Hide div in HTML Hide table TABLE or DIV content css style
I solved a problem tonight that has been botherin...
Tutorial on using Multitail command on Linux
MultiTail is a software used to monitor multiple ...
Usage of MySQL time difference functions TIMESTAMPDIFF and DATEDIFF
Usage of time difference functions TIMESTAMPDIFF ...
JavaScript to achieve skin effect (change background)
This article shares the specific code of JavaScri...