Introduction to CSS box model and positioning

Common related attributes and attribute values ​​​​of the box model

/*基本属性*/padding: padding-left/right/top/bottom
border: border-left/right/top/bottom  border-radiusmargin: margin-left/right/top/bottom/*定位*/position                //把一个元素放在静态的static、相对的relative、绝对的absolute、固定的fixed位置中left right top bottom   //元素距原位置的左右上下的偏移量overflow                //设置元素溢出其区域发生的事情clip                    //设置元素显示的形状vertical-align          //设置元素垂直对齐的方式z-index                 //设置元素的堆叠次序/*浮动*/float    //浮动 left right none inheritclear    //去掉浮动 left right both inherit 123456789101112131415161718

css floating

First of all, you must know that div is a block-level element, occupying an exclusive line in the page, top to bottom Arrangement is the legendary flow. As shown in the figure below

, it can be seen that even if the width of div1 is very small, one line on the page can accommodate div1 and div2, and div2 will not be ranked behind div1. Because the div element is on its own line.
Note that the above theories refer to divs in the standard flow. No matter how complex the layout is, the basic starting point is: "How to display multiple div elements in one row".
Obviously the standard stream can no longer meet the demand, so floats must be used. Floating can be understood asallowing a certain div element to break away from the standard flow and float on the standard flow. It is not on the same level as the standard flow. For example, assuming that div2 in the picture above floats, it will break away from the standard flow, but div1, div3, and div4 are still in the standard flow, so div3 will automatically move upward, occupy the position of div2, and reorganize a flow. As shown in the picture:

As can be seen from the picture, since div2 is set to float, it no longer belongs to the standard flow, and div3 automatically moves up to replace the position of div2 , div1, div3, and div4 are arranged in order to become a new flow. And because floats float above the standard flow, div2 blocks part of div3, and div3 looks "short".

Here div2 uses left floating (float:left;), which can be understood as floating and arranged to the left , and right floating (float:right;) is of course Arrange right. The left and right here refer to the left and right edges of the page.

If we float div2 to the right, the effect will be as follows:

At this time, div2 is close to the right edge of the page Arranged, div3 is no longer blocked, and readers can clearly see the flow composed of div1, div3, and div4 mentioned above.

So far we have only floated one div element (div2). What if we float multiple divs?

Next we add left floating to both div2 and div3. The effect is as shown below:

Similarly, because div2 and div3 are floating, they no longer belong to the standard flow, so div4 will automatically move up and form a "new" standard flow with div1, and floating is floating on the standard flow, so div2 blocks div4 again.

When div2 and div3 are set to float at the same time, div3 will follow div2. I don’t know if readers have noticed that until now, div2 is floating in every example, but it does not It does not follow after div1. Therefore, we can draw an important conclusion:

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。1

To help readers understand, let’s give a few more examples.
If we set div2, div3, and div4 to float left, the effect is as follows:

According to the above conclusion: start with div4 first Analysis, it found that the upper element div3 is floating, so div4 will follow div3; div3 found that the upper element div2 is also floating, so div3 will follow div2; and div2 found that the upper element div1 is in the standard flow element, so the relative vertical position of div2 remains unchanged, and the top is still aligned with the bottom of the div1 element. Since it is left floating, the left side is close to the edge of the page, so the left side is the front, so div2 is on the far left.

If div2, div3, and div4 are all set to float right, the effect is as follows:

Principle and left float Basically the same, but you need to pay attention to the corresponding relationship. Since it is floating right, the right side is close to the edge of the page, so the right side is the front, so div2 is on the far right.
If we only float div2 and div4 to the left, the effect is as follows:

依然是根据结论，div2、div4浮动，脱离了标准流，因此div3将会自动上移，与div1组成标准流。div2发现上一个元素div1是标准流中的元素，因此div2相对垂直位置不变，与div1底部对齐。div4发现上一个元素div3是标准流中的元素，因此div4的顶部和div3的底部对齐，并且总是成立的，因为从图中可以看出，div3上移后，div4也跟着上移，div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐。

至此，恭喜读者已经掌握了添加浮动，但还有清除浮动，有上边的基础清除浮动非常容易理解。

经过上边的学习，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列，清除浮动可以理解为打破横向排列。

清除浮动：

语法： clear : none | left | right | both 

none : 默认值，允许两边都可以有浮动对象 
left : 不允许左边有浮动对象 
right: 不允许右边有浮动对象 
both : 不允许有浮动对象12345678

根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：

此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但我们仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。而其实这种理解是不正确的，这样做没有任何效果。

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

怎么理解呢？就拿上边的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在div1中调用的，它只能影响div1，不能影响div2。

要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。

The above is the detailed content of Introduction to CSS box model and positioning. For more information, please follow other related articles on the PHP Chinese website!