Home >Web Front-end >CSS Tutorial >CSS implementation of clearing floating problems

CSS implementation of clearing floating problems

零到壹度Original: 2018-03-27 16:36:471781browse

#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="./2.png" alt="">
        <img src="./1.png" alt="">
        <img src="./1.png" alt="">
</p>
The situation when there is no float:

HTML code
<p>        //此时大图片左浮动，及下图的效果
        <img src="./2.png" alt="" style = "float: left;">
        <img src="./1.png" alt="">
        <img src="./1.png" alt="">
</p>
The 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: after

Add a class clearfix to the parent element, and set the pseudo-class: after for this class.
<!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="./2.png" alt="">
        <img src="./1.png" alt="">
        <img src="./1.png" alt="">
    </p>
  </body>
  </html>
Look! This is the first way to clear a float. It is also a popular way to clear floating items.

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="./2.png" alt="">
        <img src="./1.png" alt="">
        <img src="./1.png" alt="">
    </p>
   </body>
   </html>
有利也有弊，下面简单指出BFC的缺点：
- display:table可能会产生一些问题
- overflow:scroll可能会显示不必要的滚动条
- float:left将会把元素置于容器的左边，其他元素环绕着它
- overflow:hidden将会剪切掉溢出的元素

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!

css html Static Float display overflow 伪类 flex table

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of CSS centering methodNext article：Detailed explanation of CSS centering method

See more

CSS implementation of clearing floating problems

Related articles