3

Is it possible with CSS pseudo element :after or :before to clear floats between elements? Or is there another way I could clear the floats between <div class="float"> and <section class="inner">?

HTML and CSS looks like so:

* {
  margin: 0;
  padding: 0;
}
*, *:before, *:after {
    box-sizing: border-box;
}
section.wrap {
  width: 100%;
}
section.wrap:after {
  content: '';
  display: block;
  clear: both;
}

div {
  width: 33.33%;
  height: 40px;
  background-color: powderblue;
  float: left;
  border-top: solid 0px white;
  border-right: solid 5px white;
  border-bottom: solid 5px white;
  border-left: solid 0px white;
}

div:nth-of-type(3n + 3) {
    border-right: 0;
}
<section class="wrap">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>

    <!-- CLEAR FLOAT HERE -->

    <section class="inner">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </section>
</section>

Improve this question
3
  • 2
    Add clear: left to .inner class. Commented Dec 13, 2016 at 8:38
  • @Mr_Green ! that's it! Wanna post it as answer please, so I can accept yours Commented Dec 13, 2016 at 8:39
  • caramba, it is your wish. But I won't post it as answer :) Commented Dec 13, 2016 at 8:41

4 Answers 4

Reset to default
5

Sure with clear: both or clear: left: 

.inner {
    clear: both;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You can clear section's :before

* {
  margin: 0;
  padding: 0;
}
*, *:before, *:after {
box-sizing: border-box;
}
section.wrap {
  width: 100%;
}
section.wrap:after {
  content: '';
  display: block;
  clear: both;
}
div {
  width: 33.33%;
  height: 40px;
  background-color: powderblue;
  float: left;
  border-top: solid 0px white;
  border-right: solid 5px white;
  border-bottom: solid 5px white;
  border-left: solid 0px white;
}

div:nth-of-type(3n + 3) {
border-right: 0;
}
.inner:before {
content: '';
display: block;
clear: both;
}
<section class="wrap">
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>

<!-- CLEAR FLOAT HERE -->

<section class="inner">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</section>
</section>

Improve this answer

Comments

0

You can put clear:both before inner section, like this:

* {
  margin: 0;
  padding: 0;
}
*, *:before, *:after {
    box-sizing: border-box;
}
section.wrap {
  width: 100%;
}
section.inner:before {
  content: '';
  display: block;
  clear: both;
}

div {
  width: 33.33%;
  height: 40px;
  background-color: powderblue;
  float: left;
  border-top: solid 0px white;
  border-right: solid 5px white;
  border-bottom: solid 5px white;
  border-left: solid 0px white;
}

div:nth-of-type(3n + 3) {
    border-right: 0;
}
<section class="wrap">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>

    <!-- CLEAR FLOAT HERE -->

    <section class="inner">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </section>
</section>

Improve this answer

Comments

0

Apart from the original question, it's possible to place the ::before/::after pseudo element between child elements with flexbox layout and order property. E.g.:

* {
  margin: 0;
  padding: 0;
}
*, *:before, *:after {
    box-sizing: border-box;
}
section.wrap {
  display: flex;
  flex-flow: row wrap;
}
section.wrap:after {
  content: 'I am an inserted pseudo!';
  display: block;
  order: 1;
  width: 100%;
  background: yellow;
}

div {
  width: 33.33%;
  height: 40px;
  background-color: powderblue;
  border-top: solid 0px white;
  border-right: solid 5px white;
  border-bottom: solid 5px white;
  border-left: solid 0px white;
}

div:nth-of-type(3n + 3) {
    border-right: 0;
}

.inner {
    width: 100%;
    order: 2;
}
<section class="wrap">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>

    <!-- NO NEED TO CLEAR FLOATS, BUT WE CAN PUT A PSEUDO HERE -->

    <section class="inner">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </section>
</section>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.