Examples of 6 ways to clear floats in html_CSS/HTML

What will happen when display: inline-block is used:

1. Make the block element display in one line
2. Make the inline support width and height
3 .Line breaks are parsed
4. When not set, the width is stretched by the content
5. Block tags are supported in IE6 and 7

Due to the inline-block attribute, line breaks are parsed ( There is a gap), so the solution is to use floating float:left/right

Situations that occur when using float:

1. Make the block element display in one line
2. Make the inline element support Width and height
3. When the width and height are not set, the width is supported by the content
4. Line breaks are not parsed (so when using inline elements, you can use floats to clear gaps)
5. Element addition Floating will break away from the document flow and move in a specified direction until it hits the boundary of the parent or stops with another floating element (the document flow is the position occupied by displayable objects in the document when arranged)

Copy Code The code is as follows:

div1

div2

span1n
span2

In the following code, only box1 floats, so box1 and box2 overlap. If both float, they will not overlap

Copy code The code is as follows:

清浮动的方法：
1.给父级也加浮动（这种情况当父级margin:0 auto;时不居中）

复制代码 代码如下:

   

2.给父级加display:inline-block;(同方法1，不居中。只有IE6,7居中)

复制代码 代码如下:

   

3.在浮动元素下加

  .clear{ height:0px;font-size:0;clear:both;}但是在ie6下，块元素有最小高度，即当height

复制代码 代码如下:

    .clear{ height:0px;font-size:0;clear:both;}
*/

   

       

4. Add

Copy code The code is as follows:

.clear{ height:0px;font-size:0;clear:both;}
4. Add

*/

phpcnlt phpcn/div>

5. Add {zoom to the parent of the floating element :1;}
:after{content:""; display:block;clear:both;}

Copy code The code is as follows:

.clear{ height:0px;font-size:0;clear:both;}
4. Add


under the floating element 5. Give the parent of the floating element Level plus {zoom:1;}
:after{content:""; display:block;clear:both;}

**In IE6 and 7, it is not necessary if the parent of the floating element has a width. Clear float

haslayout recalculates the width and height of the element based on the size of the element content or the size of the parent's parent

display: inline-block
height: (any value except auto)
float: (left or right)
width: (any value except auto)
zoom: (any value except normal)
*/

cngtphpcn


6. Add overflow:auto;

Copy code The code is as follows:

div>