A, floating,

In a normal stream, divs are on a single line because they are block-level elements. What if I want to display two divs on the same line? In addition to changing divs to inline elements, you can also use floats.

float: none || left || right || inherit; /* (default, no float), left(left float), right(right float), inherit(float property value of parent element). * /Copy the code

Setting the float itself will move as far left or right as possible until it hits a border or other float element. The principle is that an element in the normal stream will ignore the floating element and will be typesetted immediately after another element in the normal stream. This causes floating elements to hide behind elements that are still in normal flow. This is easy to understand in terms of the photoshop layer concept, where all normal flow elements are on the same layer, and floating elements “float” one layer above the normal flow. Note, however, that the text will still assume that the floating element exists. Why? Float was originally designed to look like text around an image (elements containing text ignore the floating image, but text bypasses it because it thinks the floating element still exists). Several things happen when you set the float.

  • Escape from ordinary flow
  • Automatically becomes a block-level element
  • The height of the parent container will collapse, that is, the height of the parent container will become 0(because it is still in normal flow, the floating element will not exist any more, which will cause the background of the parent container to fail to display, the margin value will collapse, and the border will not open).

Obviously, parent container collapse is something we don’t want to see, so we need to clear the float to fix it. I’m just going to show you one way.

Add a new element, add CSS properties to the new element — clear: both; This means that floating elements cannot occur in either the left or right direction of the element. However, adding an element suddenly like this affects the structure of the code, so it is recommended to use pseudo-elements. Ex. :

<head>
    <style>
        .float{
            float: right;
        }
        .clearFix::after{
            content: ' ';
            clear: both;
        }
    </style>
</head>
<body>
    <div class="wrapper .clearFix">
        <div class="float"></div>
        <div class="float"></div> 
    </div>
</body>
Copy the code

​

Second, the positioning

The commonly used positions are relative and absolute. A simple demonstration of the positioning mode:

<head>
    <style>
        .demo{
            wdith: 100px;
            height: 100px;
            background-color: pink;
            position: absolute; 		/* Use absolute positioning. The default value is static, i.e. no positioning */
            right:;/* The distance relative to the right of the parent container */
            left:;/* The distance relative to the left of the parent container */
            top:;/* The distance from the top of the parent container */
            bottom:;/* The distance from the bottom of the parent container */
       									/* Can be specific values, such as px, em, etc., or percentages */
        }
    </style>
</head>
<body>								    <! Body is also a tag, so the parent container of a div is body -->
    <div  class="Demo"></div>
</body>
Copy the code

They all have one characteristic in common, that is, they all deviate from the ordinary flow. The differences are as follows: 1. The elements set to absolute are directly above the normal stream and do not affect the elements in the normal stream. Using relative, the element will be above the normal flow, but its original position will still be occupied. An element using absolute is like a car on an overpass. It can overlap with any car under the bridge (an element in a normal flow) from the plane. Using a Relativle, the car is also on an overpass and can also overlap with any car under the bridge. However, the original parking space under the bridge has been retained after paying the money, and the car under the bridge can not park there.

2. Absolute element is moved relative to the nearest parent container that defines position (the default does not count). If the parent container does not set position, the box is set further out. If it looks up and finds no element with the positon property set, it is positioned relative to the size of the browser window (regardless of the body width and height).

Finally, we add a position attribute — Fixed. When browsing the web page, we often see a small advertisement suspended in a fixed position in the window, and this kind of small advertisement uses the fixed attribute. Out of the ordinary flow, no money to buy a parking space, but the bully is that it is positioned relative to the browser window. Note that fixed causes the width of the element to shrink inward; When a transform that has a parent container gives an attribute value, the element is positioned relative to the parent container that has the transform set.