Detailed explanation of HTML floats and clear floats

This article mainly provides an overview of floating and clearing floats on the page, and gives examples to illustrate it. It has certain reference value. Let’s take a look at it with the editor.

1. Float: Main purpose It is to achieve the effect of text wrapping pictures.

It has also become the easiest way to create a multi-column layout.

<img  src= “ ” / alt="Detailed explanation of HTML floats and clear floats" >
<p>文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>

【1】Text wrapping picture

　　P {margin: 0; border: solid 1px;}
　　img {float: left;}

【2】Create a multi-column layout

　　P {margin: 0; border: solid 1px; width: 200px; float: left;}
　　img {float: left;}

2. The floating element is out of the document flow, and its parent The element can no longer see it, because it will not surround it, and the child element will have a height, but the parent element will not be supported. This is not what we want.

The following is Three methods to solve, please consider the situation and apply it reasonably:

<section>
<img  src=" / alt="Detailed explanation of HTML floats and clear floats" >
<p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
</section>
<footer>这是底部这是底部这是底部这是底部这是底部这是底部这是底部</footer>

section , footer {border: solid 1px;}
img {float: left;}

【1 】Add overflow: hidden to the parent element; force the parent element to surround the floating element

#The real purpose of such a statement is to prevent the parent element from being stretched by oversized content. After applying overflow: hidden, the parent element Still maintaining its set width, oversized child content will be cut off by the container

In addition, overflow: hidden has another effect, that is, it can reliably force the parent element to include its floating child element.

cannot be used on top-level elements that use drop-down menus, otherwise the drop-down menus that are its child elements will not be displayed.

[2] Float the parent element at the same time, the width is 100% the same as the width of the browser, and set clear float for the footer so that the footer will not squeeze next to the section

　　section {border: solid 1px; float: left; width:100%}
　　footer {border: solid 1px; clear: left}
　　img {float: left;}

Cannot be used on elements that are automatically centered near margins. Otherwise it will no longer be centered.

【3】Add a non-floating clear element (pseudo element)

.clearfix: after {
　　content: "";
　　display: block ;
　　height: 0
　　visibility: hidden;
　　clear : both
}

3. How to clear when there is no parent element (img p as a group, no parent element)

<section>
　　<img  src=" / alt="Detailed explanation of HTML floats and clear floats" >
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
　　<img  src=" / alt="Detailed explanation of HTML floats and clear floats" >
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
　　<img  src=" / alt="Detailed explanation of HTML floats and clear floats" >
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
</section>

.clearfix: after {
　　content: "";
　　display: block ;
　　height: 0
  　visibility: hidden;
　　clear : both
}

The above is the detailed content of Detailed explanation of HTML floats and clear floats. For more information, please follow other related articles on the PHP Chinese website!