CSS implementation of clearing floating problems
#First of all, we have to think about a question: Why should we clear the float? When I was doing a small demo, I encountered a problem. When the child element floated, the background color of the parent element disappeared? It can be said that with my rookie level at the time, I didn't know why the background color of the parent element was missing. I had clearly set the background color. Could it be that the color format was wrong? Or is the browser incompatible and is it a css hack? ? ? ? ? ? ? ? All guesses point to the background color, it's all the background color's fault.
Why do we need to clear floats?
# I kept struggling in the pit and got the answer. It was not the fault of the background color. But its child elements. When the child element floats, the height of the parent element becomes 0. Why is this?
The reason is that the parent element does not set a height. The original height is determined by the child element. The elements hold it up. When the child element floats, the child element is out of the document flow, and the parent element is still in the document flow. At this time, the content of the parent element has nothing, so the height of the parent element becomes the original unset height (0) . If there are non-float elements in the content of the parent element, the height of the parent element will be supported by the highest height of these elements. As shown in the picture:
HTML code
<p> <img src="/static/imghw/default1.png" data-src="./2.png" class="lazy" alt=""> <img src="/static/imghw/default1.png" data-src="./1.png" class="lazy" alt=""> <img src="/static/imghw/default1.png" data-src="./1.png" class="lazy" alt=""> </p>Copy after loginThe situation when there is no float:
HTML code
<p> //此时大图片左浮动，及下图的效果 <img src="/static/imghw/default1.png" data-src="./2.png" class="lazy" alt="" style = "float: left;"> <img src="/static/imghw/default1.png" data-src="./1.png" class="lazy" alt=""> <img src="/static/imghw/default1.png" data-src="./1.png" class="lazy" alt=""> </p>Copy after loginThe situation when floating: (Large picture float: left; small picture not Change)
can be derived from the above analysis. Floating child elements will cause "height collapse" of the parent element.
How to clear float?
There are many ways to clear floats. Currently, there are about eight ways to clear floats. But there are two most common ways to actually use it in projects:
posit 1. Add pseudo-class: after; . Add pseudo-class: afterAdd a class clearfix to the parent element, and set the pseudo-class: after for this class.
Look! This is the first way to clear a float. It is also a popular way to clear floating items.<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix:after { content: " "; display: block; clear: both; } .a { float: left; } </style></head><body> <p class="container clearfix"> <img src="/static/imghw/default1.png" data-src="./2.png" class="lazy" alt=""> <img src="/static/imghw/default1.png" data-src="./1.png" class="lazy" alt=""> <img src="/static/imghw/default1.png" data-src="./1.png" class="lazy" alt=""> </p> </body> </html>Copy after login
2. Trigger BFC
1) What is BFC?
BFC (Block Formatting Context) is a CSS rendering mode for box model layout in web pages. Its positioning system belongs to the regular document flow. Excerpted from W3C: Floating, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements whose overflow value is not visible, (except when this value has been passed When the viewport is reached) a new block-level formatting context will be created.
The above quote pretty much sums up how a BFC is formed. But let's redefine it in another way to understand it better. A BFC is an HTML box and meets at least one of the following conditions:
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者
inline-flex中的其中一个overflow的值不为visible
2) 如何用BFC清除浮动
粗暴的总结就是让浮动块包含在同一个BFC中加同时（也可以理解为包含块加属性overflow:hidden）。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container { overflow: hidden; } .a { float: left; } </style></head><body> <p> <img src="/static/imghw/default1.png" data-src="./2.png" class="lazy" alt=""> <img src="/static/imghw/default1.png" data-src="./1.png" class="lazy" alt=""> <img src="/static/imghw/default1.png" data-src="./1.png" class="lazy" alt=""> </p> </body> </html>Copy after login
有利也有弊，下面简单指出BFC的缺点：
- display:table可能会产生一些问题
- overflow:scroll可能会显示不必要的滚动条
- float:left将会把元素置于容器的左边，其他元素环绕着它
- overflow:hidden将会剪切掉溢出的元素
2. Trigger BFC
The above is the detailed content of CSS implementation of clearing floating problems. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
