一些奇怪的事情，通过css伪都明确：后 [英] Some weird thing with clear both via css pseudo :after

问题描述

检查以下代码：

HTML

 < h1 class =one> Sometext over here< / h1> 
< input type =textplaceholder =E-mailclass =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

为什么将与<$ c $>在元素之后的c>元素在上面的这个例子中不起作用？而在 < div style =clear：both>>< / div> 清除时，它自己的工作方式。

：在之后清除浮动技巧在浮动元素内工作于伪元素内元素父。

如果您将< div style =clear：both>< / div> > h1 中它不会清除浮点数，所以它必须是浮动元素的兄弟元素或父元素。

所以在你的情况下，只需清除输入中的浮动数据

.one {float：left; width：450px;身高：60px; padding-top：25px;颜色：#ccc;字体大小：34像素; font-weight：800;}。{display：block;保证金：0汽车; font-size：150％;宽度：200px; height：20px; clear：both;}

 < h1 class =one > Sometext over here< / h1>< input type =textplaceholder =E-mailclass =two>  

Examine this code:

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

Why is the clear both with the after element not working in this example above? while the clearing with <div style="clear:both"></div> inside the layout it self do work.

解决方案

The :after clear float trick works on floated element inside the pseudo elements parent.

If you would put the <div style="clear:both"></div> inside the h1 it will not clear the float either, so it has to be a sibling or a parent element of the floated element

So in your case just clear the float on the 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伪都明确：后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！