通过 css 伪 :after 清除两者的一些奇怪的事情

检查这段代码：

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 https://jsfiddle.net/2dhv5t61/

为什么是clear both与after元素在上面的示例中不起作用？而清理与<div style="clear:both"></div>在布局内部它自己可以工作。

试试这个，添加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">

演示在这里 https://jsfiddle.net/luispa/2dhv5t61/5/