After a group of floated items, there will be an automatic "clear: both" applied

Question

After a group of floated items, there will be an automatic "clear: both" applied

Within my Content Management System, I have custom Elements that need to be floated next to each other. Instead of adding an extra div with a class of "clear", I want to automatically insert a clear: both at the end using CSS3.

I attempted this workaround for clear:both:

I am utilizing the + CSS Selector to target the last float Element.

http://jsfiddle.net/xt3uhuxn/9/ (Updated with various scenarios)

.float {
    float: left;
}
.float + .float::after {

    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }

However, the ::after content is being inserted inside the Div instead of after it. How can I achieve my goal of stopping floating when there are no more float elements?

Edit: I came up with a solution here: http://jsfiddle.net/xt3uhuxn/11/ Is this method acceptable, or should I avoid it and just set clear: none; for every floated element on the entire site?

html css css-float

Answer 1

Answer №1

If the DIVs mentioned are enclosed within a container and you intend to clear the last element, another approach can be used as depicted in this example

HTML

<div class="container">
   <div class="box">1</div>
   <div class="box">2</div>
   <div>anything else</div>
</div>

CSS

.box {
    float: left;
}
.container div:last-child {
    clear: both;
}

Answer 2

If the DIVs mentioned are enclosed within a container and you intend to clear the last element, another approach can be used as depicted in this example

HTML

<div class="container">
   <div class="box">1</div>
   <div class="box">2</div>
   <div>anything else</div>
</div>

CSS

.box {
    float: left;
}
.container div:last-child {
    clear: both;
}

Answer 3

Answer №2

Try out this clever trick: adjust the after element to occupy the full width, causing everything else to shift to the following line.

Cascading Style Sheets

.align {
text-align: center;
}
.align::after {
content: "";
display:block;
float:right;
clear: both;
width:100%;
}

Answer 4

Try out this clever trick: adjust the after element to occupy the full width, causing everything else to shift to the following line.

Cascading Style Sheets

.align {
text-align: center;
}
.align::after {
content: "";
display:block;
float:right;
clear: both;
width:100%;
}

Answer 5

Answer №3

The ::after pseudo-element adds a box inside the selected element, not after it, making it a child rather than a sibling. A child element cannot clear its floating parent; only a following sibling of the float or any of its parents can create clearance depending on the layout.

If you need to apply clearance only to the next non-floating element after multiple floats, use :not(.float):

.float {
    float: left;
}
.float + :not(.float) {
    clear: both;
}

If the floats are the last or only children of their parent, then you must give clearance to the element after the parent. In such cases, you will need to select the parent element. For instance:

.float {
    float: left;
}
.float + :not(.float),
.float-parent + div {
    clear: both;
}

<div class="float-parent">
  <div class="float">1</div>
  <div class="float">2</div>
  <div>clear inside parent</div>
</div>
<div class="float-parent">
  <div class="float">1</div>
  <div class="float">2</div>
</div>
<div>
  <div>clear outside parent</div>
</div>

Answer 6

The ::after pseudo-element adds a box inside the selected element, not after it, making it a child rather than a sibling. A child element cannot clear its floating parent; only a following sibling of the float or any of its parents can create clearance depending on the layout.

If you need to apply clearance only to the next non-floating element after multiple floats, use :not(.float):

.float {
    float: left;
}
.float + :not(.float) {
    clear: both;
}

If the floats are the last or only children of their parent, then you must give clearance to the element after the parent. In such cases, you will need to select the parent element. For instance:

.float {
    float: left;
}
.float + :not(.float),
.float-parent + div {
    clear: both;
}

<div class="float-parent">
  <div class="float">1</div>
  <div class="float">2</div>
  <div>clear inside parent</div>
</div>
<div class="float-parent">
  <div class="float">1</div>
  <div class="float">2</div>
</div>
<div>
  <div>clear outside parent</div>
</div>

Answer 7

Answer №4

Check out this method to reset any div that does not have the class .float

Take a look at this JSFiddle demo

HTML:

CASE 1
<div>
    <div class="float">1</div>
    <div class="float">2</div>
</div>
<div>
    <div>anything other</div>
</div>
CASE 2
<div>
    <div class="float">1</div>
    <div class="float">2</div>
    <div>anything other</div>
</div>

CSS:

.float {
    float: left;
}
div:not(.float) {
    clear: both;
}

To scope the div clearing to a specific parent element, just adjust the selector accordingly. For example:

#containingDiv div:not(.float) {
    clear: both;
}

Answer 8

Check out this method to reset any div that does not have the class .float

Take a look at this JSFiddle demo

HTML:

CASE 1
<div>
    <div class="float">1</div>
    <div class="float">2</div>
</div>
<div>
    <div>anything other</div>
</div>
CASE 2
<div>
    <div class="float">1</div>
    <div class="float">2</div>
    <div>anything other</div>
</div>

CSS:

.float {
    float: left;
}
div:not(.float) {
    clear: both;
}

To scope the div clearing to a specific parent element, just adjust the selector accordingly. For example:

#containingDiv div:not(.float) {
    clear: both;
}

After a group of floated items, there will be an automatic "clear: both" applied

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

A guide to sending props to a CSS class in Vue 3

continuously refresh choices available for selection

Issue with jQuery animation: Background color does not change upon scrolling

Styling with CSS to create a layout similar to Facebook Messages

Is there a way to arrange list items to resemble a stack?

Enhance ngx-bootstrap's tab content with ngx-scrollbar functionality

Looking to retrieve HTML elements based on their inner text with queryselectors?

Tips for creating a div that slides from the right side to the left side

Personalized scrollbar extends beyond the screen

Looking for Protractor CSS functionalities nodes

The height of the div unexpectedly adjusts after content is displayed on hover

Update the session's data

I wish to simply click on a browser link without the need to open a new tab

What is the process for including a field specific to a date in a form?

Serializing Form Data with Checkbox Array

Creating a pull-up toolbar with just HTML and CSS for an Android browser

CSS style for centering double digit list items

Trouble displaying AngularJS $scope.data in the HTML code

Adjust image to fit inside a compact popup window - Implementing React.js and Bootstrap

Utilizing inappropriate HTML attributes