The clear both property in CSS has an impact on the layout flow

Question

The clear both property in CSS has an impact on the layout flow

Why is the placement of the <h1> tag with "clear both" at the bottom causing issues? Removing "clear both" resolves the problem, but how can I make it work when including "clear both"?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gbk"/>
<style>
#left{
    float:left;
    width:200px;
    height:400px;
    background:#cfc;
}
#main{
    margin-left:210px;
    background:#f9c;
    height:400px;
}
h1{
    clear:both;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="main">
    <h1>test</h1>
</div>
</body>
</html>

html css

Answer 1

Answer №1

The insightful explanation provided by Mr. Extraterrestrial sheds light on the root of your issue, offering a simple solution to rectify it - by incorporating the suggested code into your CSS and eliminating the clear: both from the h1 properties:

#main:after {
    visibility: hidden;
    content: " ";
    clear: both;
    height: 0;

}

If you find yourself embarking on a floating frenzy, perhaps consider developing a clearfix class that can be easily applied to your elements. You can refer to this link for detailed instructions on how to create one.

Answer 2

The insightful explanation provided by Mr. Extraterrestrial sheds light on the root of your issue, offering a simple solution to rectify it - by incorporating the suggested code into your CSS and eliminating the clear: both from the h1 properties:

#main:after {
    visibility: hidden;
    content: " ";
    clear: both;
    height: 0;

}

If you find yourself embarking on a floating frenzy, perhaps consider developing a clearfix class that can be easily applied to your elements. You can refer to this link for detailed instructions on how to create one.

Answer 3

Answer №2

Here are some queries:

1- Why is the clear both tag placed at the bottom?

As per css specifications for clear:

both
It requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

Therefore, the clear:both; on h1 also clears the float on a previous element, which is not even within the same div as the h1.

2- How do I make it work with clear both?

If you wish to retain clear:both; on h1 and have it at the start of its container div, the easiest solution is to add overflow:auto; to the container.

Demo

#main {
    margin-left:210px;
    background:#f9c;
    height:400px;
    overflow:auto;
}

Answer 4

Here are some queries:

1- Why is the clear both tag placed at the bottom?

As per css specifications for clear:

both
It requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

Therefore, the clear:both; on h1 also clears the float on a previous element, which is not even within the same div as the h1.

2- How do I make it work with clear both?

If you wish to retain clear:both; on h1 and have it at the start of its container div, the easiest solution is to add overflow:auto; to the container.

Demo

#main {
    margin-left:210px;
    background:#f9c;
    height:400px;
    overflow:auto;
}

Answer 5

Answer №3

Functioning as intended, the H1 layout is being affected rather than the main layout according to W3C guidelines. The clear property specifies which sides of an element's box(es) cannot be adjacent to a previous floating box.

Therefore, the H1 will shift down until it meets this constraint, despite being a child of the main div. If you need to apply clear to both the H1 and avoid the constraint related to the previous floating box simultaneously, you must absolute position the main. Additionally, a containing block is required, so I have included a relatively positioned container div.

You can observe this in action in this JSFiddle

#container {
    position:relative;
}
#left{
    float:left;
    width:200px;
    height:400px;
    background:#cfc;
}
#main{
    position:absolute;
    left:210px;
    right:0px;
    background:#f9c;
    height:400px;

}

h1{
    clear:both;    
}

Answer 6

Functioning as intended, the H1 layout is being affected rather than the main layout according to W3C guidelines. The clear property specifies which sides of an element's box(es) cannot be adjacent to a previous floating box.

Therefore, the H1 will shift down until it meets this constraint, despite being a child of the main div. If you need to apply clear to both the H1 and avoid the constraint related to the previous floating box simultaneously, you must absolute position the main. Additionally, a containing block is required, so I have included a relatively positioned container div.

You can observe this in action in this JSFiddle

#container {
    position:relative;
}
#left{
    float:left;
    width:200px;
    height:400px;
    background:#cfc;
}
#main{
    position:absolute;
    left:210px;
    right:0px;
    background:#f9c;
    height:400px;

}

h1{
    clear:both;    
}

The clear both property in CSS has an impact on the layout flow

Answer №1

Answer №2

Demo

Answer №3

Similar questions

Looking for a reliable CSS aggregator for .Net that can merge and minimize style sheets effectively?

Automatic playback of the next video in a video slider

Using BeautifulSoup to Retrieve JPEG from an Image Tag's Src Attribute

Tips for hiding the initial value in an HTML Select tag

Place an element in relation to the vertical size of a div that includes written content

The issue of undefined database columns arises when attempting to transmit data from an HTML form to a MySQL database via Express

jQuery counter no longer updates when scrolling

Is there a way to display MySQL data row by row within distinct divs using a loop?

Learn how to toggle multiple class elements with jQuery, and how to hide the ones that have

Retrieving POST information from a PHP script

How come my ejs files are all affected by the same stylesheet?

The image is not resizing correctly

Is there a way to dynamically refresh the options in a select dropdown using jQuery?

SELENIUM is unable to choose a name that is generated by JavaScript code

Empty input fields in Javascript calculations will result in a NaN output

What is the best way to show a background image behind the heading text?

Utilizing D3.js to filter nodes and links by making multiple selections from a checkbox

Sequentially animate objects with a fade-out and fade-in effect

Discover the secret to toggling Bootstrap 4 cards visibility when hovering over the navigation menu using CSS

Display the selected checkbox in the table