html – 使用float left忽略文本高度不起作用,但是没有

概述我想用html和css制作一个盒子模型.所以我制作了一个嵌套的div并使用左上角来正确定位.它可以工作. 这是 jsfiddle预览. 但是当我添加一个文本到divs时,垂直对齐得到了改变,这不是我想要的.但是正确地将文本放置在我想要的左侧. 根据我的经验,我给了漂浮值,所以div应该忽略span标签height.it工作时我使用float：右边但不漂浮：左边.你可以看到我使用右边文字时是否正确定 我想用HTML和CSS制作一个盒子模型.所以我制作了一个嵌套的div并使用左上角来正确定位.它可以工作.
这是 jsfiddle预览.

但是当我添加一个文本到divs时,垂直对齐得到了改变,这不是我想要的.但是正确地将文本放置在我想要的左侧.

根据我的经验,我给了漂浮值,所以div应该忽略span标签height.it工作时我使用float：右边但不漂浮：左边.你可以看到我使用右边文字时是否正确定位在右边但为什么不左边？

我想在左侧进行文本对齐.为什么它会像这样？我如何在不影响相对div的情况下放置文本

HTML代码

<div >    <div ID="sone" >    <span >margin</span>        <div ID="stwo" >           <span >border</span>            <div ID="sthree" >              <span >padding</span>                <div ID="sfour" >                   <span >elem</span>                </div>            </div>        </div>    </div>

跨文本的CSS

.Boxtext{    display:inline;    float:left;    color:#FFF;}

解决方法 发生这种情况是因为你的.margina是位置：相对的;虽然你指定顶部&在左侧位置,元素仍然相对定位,从而产生踩踏效果.
我已将其更改为绝对值并且工作正常：

JSFiddle

.margina{    position:absolute;    top:20px;    left:30px;}

为了完整起见,这是浏览器在执行顶部和顶部之前实际呈现页面的方式.左边定位在相对的.margina divs上.我添加了溢出：隐藏给他们来证明：

JSFiddle

.margina{    overflow:hidden;    position:relative;    top:20px;    left:30px;}

总结

以上是内存溢出为你收集整理的html – 使用float left忽略文本高度不起作用,但是没有全部内容，希望文章能够帮你解决html – 使用float left忽略文本高度不起作用,但是没有所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。