Web page layout method: clear floating

This time I will bring you the layout method of the web pageClear floating, what are the precautions for clearing floating, the following is a practical case, let's take a look.

The height problem of the box

1. The height of the box in the standard flow can be supported by the content height;
2. The floating content in the floating flow cannot support the height of the box;

Why do we need to be clear about floating?

Between adjacent boxes, if the front box has no height, then the floating element in the back box will look for the floating element in the front box. This will It leads to confusion in the interface, so it is necessary to clear the float;

Clear the float method one:

Solution:

Set the height of the previous parent element

Notes :

In enterprise development, we can write height without writing height, so this method is rarely used;

CSS:

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            height: 20px;  //给前面盒子设置高度
            background-color: red;
        }
        .box2{
            background-color: green;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }    </style>

body:

<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p></div><div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>

Clear floating method two:

Solution:

Add the clear:both; attribute to the back box

clear attribute value:

none: Default value, sort according to the sorting rules of floating elements (left floating elements look for left floating elements, right floating elements look for right floating elements)
left: Do not look for the previous left floating element (that is: do not compare it with the previous left floating element) Floating elements are displayed in one line)
right: Do not look for the previous right floating element
both: Do not look for the previous left floating element and right floating element

Note:

When After we add the clear attribute to an element, the margin attribute of this attribute will become invalid; so it is not recommended to use

CSS:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            border: 1px solid #000;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            clear: both; //给后面的盒子添加clear:both;属性
            margin-top: 28px;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }    </style>

Clear floating method three:

Solution:

Exterior wall method: add an additional block-level element between two boxes with floating child elements; and set the clear: both; attribute;

Notes:

Exterior wall method allows the second box to use the margin-top attribute,
Exterior wall method does not allow the first box to use the margin-bottom attribute,
However The margin effect can be achieved by setting the height of additional tags;
This technique is widely used in Sohu, but due to the need to add a large number of meaningless tags, it is not recommended;

CSS:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;            /*margin-bottom: 10px;*/ //外墙法不可以让第一个盒子使用margin-bottom属性,
        }
        .box2{
            background-color: green;            /*margin-top: 10px;*/  //外墙法它可以让第二个盒子使用margin-top属性,
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
        .wall{
            clear: both; //设置clear: both;属性;
        }
        .h20{
            height: 20px; //设置额外标签的高度来实现margin效果;
            background-color: skyblue;
        }
    </style>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p></div><div class="wall h20"></div> //外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p></div>

Clear floating method four:

Solution:

Inner wall method:
1Add an additional block-level element at the end of all child elements in the first box,
2Set the clear: both; attribute to this additional block-level element

Note:

The inner wall method allows the second box to use the margin-top attribute
The inner wall method allows the first box to use the margin-bottom attribute

<a>内墙法会自动撑起盒子的高度,所以可以直接设置margin属性</a>

The difference between the exterior wall method and the interior wall method?

The exterior wall method cannot support the height of the first box. The inner wall method can support the height of the first box

In enterprise developmentThe partition method is not commonly used to clear floating (partition wall method: external wall method and internal wall method) Wall method)

CSS:

   <style>
        *{            margin: 0;            padding: 0;
        }        .box1{            background-color: red;            /*margin-bottom: 10px;*/
        }        .box2{            background-color: green;            /*margin-top: 10px;*/
        }        .box1 p{            width: 100px;            background-color: blue;
        }        .box2 p{            width: 100px;            background-color: yellow;
        }        p{            float: left;
        }        .wall{            clear: both;
        }        .h20{            height: 20px;            background-color: skyblue;
        }    </style></head>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
    <div class="wall h20"></div> //设置内墙</div><div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p></div>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

CSS background and sprite

How to use CSS display mode

The above is the detailed content of Web page layout method: clear floating. For more information, please follow other related articles on the PHP Chinese website!