Float and Clear Float in Overview Page

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

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

 <img src="" />
<p>Text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content</p>

【1】Text wrapping image

  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 can't see it, because it won't surround it, so the child element will have a height, but the parent element will not be propped up, which is not what we want.

There are three solutions below. Please consider the situation and apply them appropriately:

 <section>
<img src=" />
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
</section>
<footer>This is the bottom. This is the bottom. This is the bottom. This is the bottom. This is the bottom. This is the bottom. This is the bottom. This is the bottom.</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 this declaration is to prevent the parent element from being stretched by oversized content. After applying overflow: hidden, 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, which is that it can reliably force the parent element to contain its floated child elements.

It cannot be used on the top-level element that uses the drop-down menu, otherwise the drop-down menu as its child element will not be displayed.

【2】Float the parent element at the same time, with a width of 100% the same as the browser width, and clear the float for the footer so that the footer will not be squeezed 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 by margins. Otherwise it is no longer centered.

【3】Add non-floating clearing elements (pseudo elements)

 .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">Text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content</p>
  <img src=" />
  <p class="clearfix">Text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content</p>
  <img src=" />
  <p class="clearfix">Text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content text content paragraph content</p>
</section>

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

The above is the full content of this article. I hope that the content of this article can bring some help to your study or work. At the same time, I also hope that you can support 123WORDPRESS.COM!