Question

CSS伪元素:after或:before是否可以清除元素之间的浮点数？或者是否有另一种方法可以清除<div class="float">和<section class="inner">之间的浮动？

HTML和CSS看起来像这样：

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 1

确定clear: both或clear: left：

.inner {
    clear: both;
}

Answer 2

您可以清除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>

Answer 3

你可以说清楚：在内部部分之前，都是这样的：

＆＃13;

<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>

＆＃13;

RegisterHandler

＆＃13;

Answer 4

除了原始问题之外，可以将::before / ::after伪元素放在具有flexbox布局和order属性的子元素之间。 E.g：

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

元素之间的CSS伪元素

4 个答案: