Frontend - CSS Float

CSS float

1. Structural pseudo-class selector

  1. Function and advantage:

    Function: Find elements according to their structural relationship in HTML

    Advantages: Reduce the dependence on classes in HTML, which is helpful to keep the code clean

    Scenario: Commonly used to find child elements in a parent selector

  2. Selector

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* select the first */
        li:first-child{
            background: green;
        }

        /* select the last one */
        li:last-child{
            background: red;
        }
        /* Any one choose the third*/
        li:nth-child(3){
            background: blue;
        }

        /* The nth from the bottom The 2nd from the bottom*/
        li:nth-last-child(2){
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>this is the first li</li>
        <li>this is the 2nd li</li>
        <li>this is the 3rd li</li>
        <li>this is the 4th li</li>
        <li>this is the 5th li</li>
        <li>this is the 6th li</li>
        <li>this is the 7th li</li>
        <li>this is the 8th li</li>
    </ul>
</body>
</html>
  1. Points to note for n:
    1. n is: 0, 1, 2, 3, 4, 5...
    2. Common formulas can be formed by n

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* even */
        li:nth-child(2n){
            background-color: yellow;
        }
         /* odd number */
         li:nth-child(2n+1){
            background-color: blue;
        }
        
    </style>
</head>
<body>
    <ul>
        <li>this is the first li</li>
        <li>this is the 2nd li</li>
        <li>this is the 3rd li</li>
        <li>this is the 4th li</li>
        <li>this is the 5th li</li>
        <li>this is the 6th li</li>
        <li>this is the 7th li</li>
        <li>this is the 8th li</li>
    </ul>
</body>
</html>

2. Pseudo-elements

  1. Pseudo-elements: Non-main content in general pages can use pseudo-elements

  2. the difference:

    1. Elements: Tags for HTML settings
    2. Pseudo elements: label effects simulated by CSS
  3. type:

    1. ::before ---- add a pseudo-element before the content of the parent element
    2. ::after ---- Add a pseudo-element at the end of the content of the parent element
  4. be careful:

    1. The content attribute must be set to take effect
    2. Pseudo-elements are inline elements by default
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .father::before{
            content: 'Xiao Ming';
            color: aqua;
            width: 100px;
            height: 100px;
            background-color: yelloww;
            display: block;
        }

        .father::after{
            content: 'furniture';
        }
    </style>
</head>
<body>
    <!-- Pseudo-element: via CSS Create labels, small images that are not important for decoration 
    Find the parent first, and create a level label in this parent
    -->
    <div class="father"> design is</div>
</body>
</html>

3. Standard stream

  1. Standard flow: Also known as document flow, it is a set of layout rules that browsers adopt by default when rendering and displaying web page content, which specifies how elements should be arranged
  2. Common standard flow layout rules:
    1. Block-level elements: from top to bottom, vertical layout, exclusive line
    2. Inline elements or inline block elements: from left to right, horizontal layout, automatic line folding if there is not enough space

4. float

When the browser parses an inline block or an inline label, if the label is written in a new line, a space distance will be generated

4.1 The role of floating

Early Role: Graphic Surrounding

What it does now: web page layout, block tags are arranged in a row

4.2 Floating code

Add the following code to the corresponding class:

float:left;

4.3 Characteristics of floating

  1. Floating elements will break away from the standard flow (abbreviation: off-label), and do not occupy a position in the standard flow, which is equivalent to floating from the ground to the air
  2. Floating elements are half a level above the standard flow and can cover elements in the standard flow
  3. Floating to find floating, the next floating element will float left and right behind the previous floating element
  4. Floating elements have special display effects
    1. A row can display multiple
    2. Width and height can be set
  5. Note: Floating elements cannot pass text-align:center or margin:0auto

5. Clear float

Meaning: Clear the effect of floating

Impact: If the child element is floating, the child element cannot open the block-level parent element of the standard flow at this time

Reason: The sub-element is unmarked after floating 1> does not occupy the position

Purpose: The height of the parent element is required so as not to affect the layout of other web page elements

5.1 How to clear floating

Method 1: Directly set the height of the parent element

Advantages: simple and rude, convenient

Disadvantage: In some layouts, the height of the parent element cannot be fixed. Such as: news list, Jingdong recommendation module

Method 2: Additional tags

  1. operate:

    1. Add a block-level element at the end of the content of the parent element
    2. Set clear:both for the added block-level elements
  2. Disadvantages: Additional tags will be added to the page, which will complicate the HTML structure of the page

Method 3: Single pseudo-element removal method

Action: Replaced extra tags with pseudo-elements

  1. Basic writing:

     .clearfix::after{
                content: '';
                display: block;
                clear: both;
            }
    
  2. Supplementary writing:

     .clearfix::after {
                content:'';
                display: block;
                clear: both;
                /* Supplementary code: Pseudo-elements are not visible in web pages */
                height: 0;
                visibility: hidden;
            }
    

Advantages: used in the project, you can directly add a class to the label to clear the floating

Method 4: Double pseudo-element removal method

operate:

		 /* .clearfix::before Function: Solve the problem of margin collapse
			Margin collapse: Parent and child labels are both block-level, adding margin to the child will affect the position of the parent
		*/
		.clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
        }
        .clearfix::after{
            clear: both;
        }

Advantages: used in the project, you can directly add a class to the label to clear the floating

Method 5: Set overflow: hidden to the parent element

  1. Operation: Set overflow: hidden directly to the parent element
  2. Advantages: convenient

CSS writing order: browser execution efficiency is higher

  1. float / display
  2. Box model: margin border padding width height background color
  3. text style

Tags: Front-end css3 css

Posted by shyish on Tue, 10 Jan 2023 23:01:58 +0300