This is the 25th day of my participation in the August Challenge

Today we’re going to talk about float

Through the property float:left/right

  1. You can have elements stand in line, float left or right;
  2. The essence of floating model is: floating elements generate floating flow;

However, if you wrap a floating element, there will be a phenomenon that the outer layer cannot wrap the floating element, such as:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Wrap float element</title>
    <style>
        .wraper{
            border: 1px solid rgb(3.54.3);
        }
        .left{
            height: 100px;
            width: 100px;
            background-color: rgb(178.127.224);
            float: left;
        }
        .right{
            height: 100px;
            width: 200px;
            background-color: rgb(224.211.18);
            float:right;
        }
    </style>
</head>
<body>
    <div class="wraper">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
Copy the code

If the height of the outer container is not set, its height will be supported by the content, so why not support. The reason is that all elements that generate a floating flow are invisible to block-level elements, as long as the elements and text classes that generate the BFC with inline attributes and text are visible to the floating elements. So what? In fact, from floating flow to floating flow, we can solve this problem by eliminating floating flow.

Clean up the floating stream with pseudo-elements

.wraper:after{
  content:' ';
  display:block;
  clear:both;
}
Copy the code

Solve!

Note: The pseudo-element is inherent in any element. The clear floating user must be a block-level element. There are two pseudo-elements:

  • :before
  • :after

Other scattered knowledge points

  1. Elements with position: absolute and float: left/right are automatically inline-block.
  2. All inline elements have the property of text, called text elements, including inline and inline-block elements.
  3. Overflow container dot display
white-space:nowrap; Text does not wrapoverflow:hidden; Beyond partial hidingtext-overflow: the ellipsis; dotCopy the code
  1. General inline elements can only be nested within inline elements. In particular, an A tag cannot be nested within an A tag.

General block-level elements can be nested with any element. Specifically, p tags cannot be nested with block-level elements.

The above is the content of this article, welcome to like support