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
Let's talk about my understanding and application of React Context
Table of contents Preface First look at React Con...
Implementing Markdown rendering in Vue single-page application
When rendering Markdown before, I used the previe...
React internationalization react-intl usage
How to achieve internationalization in React? The...
Nginx local directory mapping implementation code example
Sometimes you need to access some static resource...
Solution to the problem of session failure caused by nginx reverse proxy
A colleague asked for help: the login to the back...
Mysql accidental deletion of data solution and kill statement principle
mysql accidentally deleted data Using the delete ...
Ajax solves cross-domain problem by setting CORS response header to achieve cross-domain case study
1. Set CORS response header to achieve cross-doma...
Nginx location matching rule example
1. Grammar location [=|~|~*|^~|@] /uri/ { ... } 2...
Vue implements mobile phone verification code login
This article shares the specific code of Vue to i...
A brief introduction to web2.0 products and functions
<br />What is web2.0? Web2.0 includes those ...
Detailed explanation of the practical application of centos7 esxi6.7 template
1. Create a centos7.6 system and optimize the sys...
Examples of using && and || operators in javascript
Table of contents Preface && Operator || ...
Summary of MySQL slow log practice
Slow log query function The main function of slow...
mysql 8.0.12 winx64 download and installation tutorial
MySQL 8.0.12 download and installation tutorial f...
Nginx sample code for implementing dynamic and static separation
In combination with the scenario in this article,...