Float and clear float in HTML

This article mainly introduces floating and clearing floating in HTML. Interested friends can refer to it. I hope it will be helpful to everyone.

1. Float: The main purpose is to achieve the effect of text wrapping around images.

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

<img src= “ ” />
<p>文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>

【1】Text wrapping pictures

　　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 element cannot see it, because it will not surround it. The child element will have a height, but the parent element will not. It will be propped up, which is not what we want at this time.

There are three ways to solve it, please consider the situation and apply it reasonably:

<section>
<img src=" />
<p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
</section>
<footer>这是底部这是底部这是底部这是底部这是底部这是底部这是底部</footer>

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

【1】Add overflow: hidden for 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. Apply overflow: hidden After that, the parent element still maintains its set width, and 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 Contains its floating child elements.

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=" />
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
　　<img src=" />
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
　　<img src=" />
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
</section>

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

Summary: The above is the entire content of this article, I hope it can help everyone learn Helps.

Related recommendations:

JS simple implementationFloatingWindow

How to deal with http being hijackedFloatingAdvertising

CSS implementation to clear Floating issues

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