What does clear in html mean?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

What does clear in html mean?

醉折花枝作酒筹

Jun 07, 2021 pm 02:49 PM

clear html

In HTML, clear means clearing. You only need to set the "clear: attribute value" for the floating element. The clear attribute defines which sides of the element are not allowed to have floating elements. Clear space is added above the element's margins, without changing the margins themselves.

What does clear in html mean?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The function of clear in css is to clear the floating effect of elements.

In CSS1 and CSS2, this is achieved by automatically adding a top margin to clear elements (i.e. elements with the clear attribute set). In CSS2.1, clear space is added above the element's upper margin, but the margin itself does not change.

No matter what kind of change, the final result is the same. If it is declared to be cleared on the left or right, the top outer border of the element will be just below the bottom margin of the floating element on that side.

clear attribute value:

left Floating elements are not allowed on the left.

right Floating elements are not allowed on the right side.

Both Floating elements are not allowed on the left and right sides.

none Default value. Allows floated elements to appear on both sides.

inherit specifies that the value of the clear attribute should be inherited from the parent element.

Example:

<html>
  <head>
    <style type="text/css">
      div {
        float: left;
        margin: 20px;
      }
      .three{
        clear: both;
      }
    </style>
  </head>
  <body>
    <div>
      <img  src="/static/imghw/default1.png"  data-src="images/1.jpg"  class="lazy"   / alt="What does clear in html mean?" >
    </div>
    <div>
      <img  src="/static/imghw/default1.png"  data-src="images/2.jpg"  class="lazy"   / alt="What does clear in html mean?" >
    </div>
    <div class="three">
      <img  src="/static/imghw/default1.png"  data-src="images/3.jpg"  class="lazy"   / alt="What does clear in html mean?" >
    </div>
  </body>
</html>

Copy after login

Effect:

What does clear in html mean?

Recommended learning:html video tutorial

The above is the detailed content of What does clear in html mean?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn