Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS
|
In the past, float was often used for layout, but we all know that there is a problem with using floating layout - causing the height of the parent element to collapse Then let’s explore the solution to this problem together! Let’s start with the document flow. 1. Classification of positioning
① Ordinary flow positioning 1. Each element has its own space on the page 2. Each element is rendered (displayed) from the upper left corner of the parent element 3. Block-level elements are arranged one by one from top to bottom, and each element is in a separate line 4. Inline elements are multiple elements displayed in one line, arranged from left to right, and displayed without line breaks ②Floating positioning float: Value: left After the element is floated, it will dock to the left of the parent element in the current line, or next to the floating element on the left After the element is floated, it will be docked to the right of the parent element in the current line, or next to the floating element on the right none default value, no float Floating characteristics 1. Once an element floats, it is out of the document flow (it does not occupy page space, and the following non-floating elements will move forward to fill the position) 2. The floating element will dock on the left/right side of the parent element in the current line, or dock on the edge of other floating elements 3. When the parent element cannot display all floating elements horizontally, the last one that cannot be displayed will automatically wrap 4. Floating is used to solve the problem of multiple block-level elements being displayed in the same line ③Special situations caused by floating positioning 1. The problem of floating element placement When the element cannot display all the floating elements, the last element that cannot be displayed will wrap However, floated elements will occupy positions according to their own float direction. The floating elements that are pushed down need to be moved out of the way and displayed further down.
2. Once an element is floated, if the element has no defined width, the width of the element after floating will be based on the content
3. Once an element is floated, it will become a block-level element Allows you to set the size and vertical margins 4. Text and inline elements will not be pressed under by floating elements. Instead, it cleverly avoids it and displays it around the floating element. In the past, we often used the floating feature to create the effect of text wrapping around images. Let's write a small demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Floating element-Xiaoling</title>
<style>
.box,.box1{ width:100%; height:200px;}
.box{margin-bottom: 201px;}
.box3{ width: 800px; height: 50px;}
.item{float: left; }
.box .item{ width:500px;height: 100%;}
.box1 .item{ height: 100%;}
.red{background: red;}
.green{background: green;}
.pink{background: pink;}
.black{background:#ddd;}
.block{ width:100px;height:100px;background: #ddd;float: right;}
</style>
</head>
<body>
<h3>Set width of block</h3>
<div class="box">
<div class="item red">abcdefghigklmn</div>
<div class="item green">abcdefghi</div>
<span class="item pink">abcdefghi</span>
<div class="item black">abc</div>
</div>
<h3>Block with no width set</h3>
<div class="box1">
<div class="item red">abcdefghigklmn</div>
<div class="item green">abcdefghi</div>
<span class="item pink">abcdefghi</span>
<div class="item black">abc</div>
</div>
<h3>Text wraps around floating elements</h3>
<div class="box3">
<div class="block"></div>
<span>1. The most obvious sign of a great man is his strong will. No matter how the environment changes, his original intention and hope will not change in the slightest, and he will eventually overcome obstacles and achieve his desired goals.
2. Don’t be fooled by the eyes of others. It is foolish to guess other people’s thoughts based on your own heart. If you are only sure about controlling your own feelings, try to maintain a good mood every day!
3. When people are in adversity, their ability to adapt to the environment is truly amazing. People can endure misfortune because they have amazing potential and perseverance. As long as they are determined to use it, they will be able to overcome difficulties.
4. What makes you tired is not the mountain in front of you, but the grain of sand in your shoe. Life is an adventure. On every stormy night, the only thing that can keep you going is your persistent belief.
5. If you lose your property, you lose only a little. If you lose your honor, you lose a lot. If you lose your courage, you lose everything.
</span>
</div>
</body>
</html>④ Clear floating After the element is floated, it will be out of the document flow, and the subsequent non-floating elements will be moved forward to fill the position. If the subsequent element does not want to fill the position, you need to set clear floating for this element clear: Value: 1.left Clear the effect of left floating on me 2.right Clear the effect of right floating on me 3.both clears the influence of left and right floating on me 4.none does not clear the impact ⑤High collapse 1. The parent element is not high, and the height is supported by the child element. 2. All child elements are floating Then all child elements are out of the document flow, and the parent element thinks that there are no elements inside it. So the parent element has no height. See picture
Solution: 1. The parent element also floats. Disadvantage: It affects the non-floating elements behind the parent element (the non-floating elements behind occupy the document flow and will fill the position of the elements occupying the previous floating elements (out of the document flow))
2. The disadvantage of directly writing the height of the parent element is that you may not always know the specific height (for example, in the list of some products on Taobao's website in the figure below, you don't know how many products there are, so the corresponding parent element height is also unclear - this is just an example to illustrate some situations where we don't know the specific height of the parent element, it does not mean that Taobao uses floating for layout~)
3.Overflow: Hidden drawbacks will prevent the overflow from being displayed 4. Add a block-level element to the parent element. This block-level element has no content and no height. Just write clear:both. This allows the parent element to find the height of the content in the document flow (1) Adding a block-level parent element directly inside the parent element will result in: ① The code is not beautiful ② It may be accidentally deleted by later maintenance personnel (thinking it is useless code)
(2) The parent element uses the pseudo element :after and clears the floating
Finally, the height collapse problem is perfectly solved! Reference code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Solving the problem of floating - parent element height collapse</title>
<style>
.box1,.box2,.box3,.box4,.box5{width:400px;background: greenyellow;}
/* .box3{width: 500px;} */
.box1{margin-bottom: 201px;}
.item{ width:180px;height:180px;}
.mr{ margin-right: 30px;}
.red{background: red;}
.blue{background:blue;}
.green{background: green;}
.pink{background-color: pink;}
.float-left{float:left}
.item2,.item3{width:100%;height:180px;}
.box3{overflow: hidden;}
.clear{clear:both}
.box5::after{display: block;content: '';clear: both;}
</style>
</head>
<body>
<h3>Parent element height collapse phenomenon</h3>
<div class="box1">
<div class="item float-left mr red"></div>
<div class="item float-left blue"></div>
</div>
<h3>Solution 1 to parent element height collapse——parent element also floats</h3>
<div class="box2 float-left">
<div class="item float-left mr red"></div>
<div class="item float-left blue"></div>
</div>
<!--- Impact on the following non-floating elements: Non-floating elements have document flow and will fill the position of the previous floating elements-->
<!-- <div class="item2 green">1</div>
<div class="item2 pink">2</div> -->
<h3>Parent element height collapse solution 3——overflow:hidden</h3>
<div class="box3">
<div class="item float-left mr red"></div>
<div class="item float-left blue"></div>
<!-- <div class="item blue"></div> -->
<!-- <span class="box3">sdcvsdcvsdvsdvsdfvsdvsvzsdfvasfvadav</span> -->
</div>
<h3>Solution 4 to parent element height collapse - add block-level elements (1)</h3>
<div class="box4">
<div class="item float-left mr red"></div>
<div class="item float-left blue"></div>
<div class="clear"></div>
</div>
<h3>Solution 4 to parent element height collapse - adding block-level elements (2)</h3>
<div class="box5">
<div class="item float-left mr red"></div>
<div class="item float-left blue"></div>
</div>
</body>
</html>This concludes this article about several CSS methods to solve the problem of floating causing the height collapse of the parent element. For more related content about floating causing the height collapse of the parent element, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: Troubleshooting the cause of 502 bad gateway error on nginx server
>>: Use vue to realize the registration page effect vue to realize SMS verification code login
Recommend
Implementation of webpack-dev-server to build a local server
Table of contents Preface webpack-deb-server webp...
Detailed explanation of Apache+Tomcat7 load balancing configuration method under Windows
Preparation Windows Server 2008 R2 Enterprise (2....
The data folder failed to be created automatically during the installation of mysql8.0.14.zip. The service cannot be started.
After reinstalling the system today, I reinstalle...
MySQL 5.7.13 source code compilation, installation and configuration method graphic tutorial
Installation environment: CentOS7 64-bit MINI ver...
Use of MySQL SHOW STATUS statement
To do MySQL performance adjustment and service st...
Detailed explanation of the solution to Tomcat's 404 error
The 404 problem occurs in the Tomcat test. The pr...
Understanding and using callback functions in JavaScript
Table of contents Overview What are callbacks or ...
Installation of mysql-community-server. 5.7.18-1.el6 under centos 6.5
Use the following command to check whether MySQL ...
How to configure Nginx load balancing
Table of contents Nginx load balancing configurat...
What is the difference between HTM and HTML? What is the difference between HTM and HTML?
In the process of learning web design, I did not ...
How to set up scheduled backup tasks in Linux centos
Implementation Preparation # Need to back up the ...
Detailed explanation of Nginx static service configuration (root and alias instructions)
Static files Nginx is known for its high performa...
How to install pyenv under Linux
Prerequisites Need to install git Installation St...
In-depth understanding of uid and gid in docker containers
By default, processes in the container run with r...
XHTML Getting Started Tutorial: XHTML Tags
Introduction to XHTML tags <br />Perhaps you...