CodeJackpot - clear

clear

CSS or Cascading Style Sheets is a language used to describe the presentation of a document written in HTML or XML. It is used to style web pages and make them visually appealing. CSS properties are used to define the style of an HTML element. In this article, we will discuss the clear property in CSS.

Introduction to Clear Property

The clear property is used to specify whether an element should be moved below the floating elements that precede it. It is used to clear the float property. When an element is floated, it is taken out of the normal flow of the document and other elements flow around it. The clear property is used to bring the element back into the normal flow of the document.

Brief Explanation of Clear Property

The clear property is used to clear the float property. When an element is floated, it is taken out of the normal flow of the document and other elements flow around it. The clear property is used to bring the element back into the normal flow of the document. The clear property can take the following values:

none: The element is not moved below any floating elements.
left: The element is moved below any floating elements that are on the left side.
right: The element is moved below any floating elements that are on the right side.
both: The element is moved below any floating elements that are on both sides.

Code Examples

Here are some examples of how to use the clear property:

Example 1:

In this example, we have a div element that is floated to the left. We want the paragraph element to be moved below the div element. We can use the clear property to achieve this:

  
    <div style="float: left; width: 50%;">
      <p>This is a floated div element.</p>
    </div>
    <p style="clear: left;">This paragraph is moved below the floated div element.</p>

Example 2:

In this example, we have two div elements that are floated to the left. We want the paragraph element to be moved below both the div elements. We can use the clear property with the value "both" to achieve this:

  
    <div style="float: left; width: 50%;">
      <p>This is a floated div element.</p>
    </div>
    <div style="float: left; width: 50%;">
      <p>This is another floated div element.</p>
    </div>
    <p style="clear: both;">This paragraph is moved below both the floated div elements.</p>

Example 3:

In this example, we have a div element that is floated to the right. We want the paragraph element to be moved below the div element. We can use the clear property with the value "right" to achieve this:

  
    <div style="float: right; width: 50%;">
      <p>This is a floated div element.</p>
    </div>
    <p style="clear: right;">This paragraph is moved below the floated div element.</p>

Conclusion

The clear property is used to clear the float property. It is used to bring an element back into the normal flow of the document. The clear property can take the values "none", "left", "right", and "both".

CSS