通过 css pseudo :after 清除了一些奇怪的东西

Question

检查这段代码：

HTML

<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">

CSS

.one {
display: block;
float: left;
width: 450px;
height: 60px;
padding-top: 25px;
color: #ffffff;
font-size:34px;
font-weight: 800;
}
.one:after { clear: both; }
.two {
margin: 0 auto;
font-size: 150%;
width: 200px;
height: 20px;
  }

JSfiddle

为什么带有 after 元素的 clear both 在上面的示例中不起作用？虽然在布局中使用 <div style="clear:both"></div> 进行清理，但它自己确实有效。

Answer 1

试试这个，将 display: block 添加到输入中：

CSS

.one {
  display: block;
  width: 450px;
  height: 60px;
  padding-top: 25px;
  color: #ffffff;
  font-size: 34px;
  font-weight: 800;
  text-align: left;
}

.two {
  font-size: 150%;
  width: 200px;
  height: 20px;
  display: block;
  margin:0 auto;
}

HTML

<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">

DEMO HERE

Answer 2

如果您向父元素提供 clearfix 会很好尝试此代码段希望这可以帮助您。我也包括 :before 但这是清除浮动的最佳方法。这是 jsfiddle link https://jsfiddle.net/rhulkashyap/jjv6t6gd/

.one {
  display: block;
  float: left;
  width: 450px;
  height: 60px;
  padding-top: 25px;
  color: #111;
  font-size: 34px;
  font-weight: 800;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.two {
  margin: 0 auto;
  font-size: 150%;
  width: 200px;
  height: 20px;
}

<div class="clearfix">
  <h1 class="one">Sometext over here</h1>
</div>
<input type="text" placeholder="E-mail" class="two">

Answer 3

:after 清除浮动技巧适用于内部伪元素父元素的浮动元素。

如果将 <div style="clear:both"></div> 放在 h1 中，它也不会清除浮动，因此它必须是浮动元素的兄弟元素或父元素

所以在你的情况下，只需清除 input

上的浮动

.one {
  float: left;
  width: 450px;
  height: 60px;
  padding-top: 25px;
  color: #ccc;
  font-size:34px;
  font-weight: 800;
}
.two {
  display: block;
  margin: 0 auto;
  font-size: 150%;
  width: 200px;
  height: 20px;
  clear: both;
}

<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">

通过 css pseudo :after 清除了一些奇怪的东西

Some weird thing with clear both via css pseudo :after

html

css

css-float

pseudo-element