Question

我有一个用pseudo：after元素创建的标题的下划线，当此标题显示在浮动图像/ div的右侧时，下划线在图像/ div上移动。

Select CASE WHEN isnumeric([fieldname]) THEN 'Valid' ELSE 'Invalid" END

这是一个简短的编解码器：http://codepen.io/costelc/pen/GqgdvB

任何想法都表示赞赏。感谢

Answer 1

浮动是不流动的，所以这是预期的。如果您不希望标题与浮点重叠，则应该建立块格式化上下文。

一种常见的方法是将overflow设置为visible以外的任何内容，例如

h2 {
  overflow: hidden;
}

来自CSS 2.1 Floats，

由于浮动不在流中，因此创建了未定位的块框   在浮动箱垂直流动之前和之后，好像浮子没有   存在。

表的边框，块级替换元素或   正常流程中的元素，用于建立新的block formatting context（例如overflow以外的visible元素   不得与同一块中任何浮点数的边距框重叠   将上下文格式化为元素本身

body {
  max-width: 300px;
}
.right {
  width: 100px;
  height: 100px;
  background: #eee;
  float: right;
  margin: 0 0 0 20px;
}
.clear {
  clear: both;
}
.left {
  width: 100px;
  height: 100px;
  background: #eee;
  float: left;
  margin: 0 20px 0 0;
}
h2 {
  overflow: hidden;
}
h2:after {
  content: '';
  position: relative;
  max-width: 100px;
  display: block;
  height: 4px;
  background: #0073ae;
}

<h2>Good heading here</h2>
<div class="right"></div>
<h2>Another good heading here</h2>
<p>anything here</p>
<br class="clear">
<div class="left"></div>
<h2>Bad heading here</h2>
<p>anything here</p>

用浮点下划线后的CSS伪

1 个答案: