CSS:被子覆盖元素内的文字怎样显示?

有两个div:
<div class="div1">aaaaaaaaaaaaa</div>
<div class="div2">dddddddddddddddddddddddddddd</div>
样式是:
<style>
.div1{
width:100px;
height:20px;
background: red;
float:left;
}
.div2{
width:120px;
height: 20px;
background: blue;

}

</style>
效果:

当我给第二个加个:overflow:hidden;
后,效果是这样的:

问题是:
第一个漂浮的时候,第二个里的文字为什么不在div内,而是在下一行?
还有就是:为什么当第二个设置了overflow的时候,第二个div也漂浮起来了?

第1个回答  推荐于2016-01-31
楼主,你第一个问题是因为你所定义的.div1只让包住aaaaa的盒子漂浮了起来,但是aaaaa与bbbbb的内容还属于文本状态,文本状态会使不同标签中的内容,分行显示,也就是aaaaa在第一行,bbbbb在第二行的原因。而由于.div2没有漂浮,所以两者的盒子模型会叠加显示,造成了图一中蓝色只显示了20像素。
楼主对两者增加:display:inline;就可解决问题

第二个问题:
overflow:hidden;这个属性,当盒子没有float状态、并且定义了width、height时,默认会使盒子处于漂浮状态。本回答被提问者和网友采纳

CSS3模糊滤镜如何应用在背景上而不影响其中内容的显示?
滤镜属性被子元素继承了,这个纯css不能解决,这玩意子继承了父的模糊根本覆盖不了: id=a这层单独放:图片背景+模糊滤镜 <!-- 下面id=b这个div里面才放你网页主要结构 --> 然后:--- css 定位属性让 b 重叠在 a 上面合适位置 (给a、b外面再加个父级...

css如何设置能让一个div元素覆盖在div元素上后下面的div元素中的文字不...
div1中的文字将会被div2覆盖 div2 你要的是不是把上面转化为下面这个效果 div1 div2 效果图: 通过你的表述,我只能这么理解 本回答由提问者推荐 举报| 答案纠错 | 评论 11 2 摆渡哪里 采纳率:77% 来自团队:百度知道的

css布局:a标签下的img会出现多余的一条线,刚开始在下面,用vertical-al...
3、设置父对象的文字大小为0px 即,在#sub中添加一行:“font-size:0;”可以解决问题。但这也引发了新的问题,在父对象中的文字都无法显示。就算文字部分被子对象括起来,设置子对象文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。4、改变父对象的属性 如果父对象的宽、高固定,图片...

在css中什么叫高度垂直塌陷
1. 子元素未设置浮动 .b{ width: 100px;height: 100px;background-color: aqua;} 此时,父元素被子元素撑起 2. 子元素设置浮动 .b{ width: 100px;height: 100px;background-color: aqua;float: left;} 此时,父元素没有被子元素撑起,父元素高度塌陷 二、高度塌陷导致的问题 父元素高度塌...

CSS哪些样式属性不可以被子元素继承?
1、display:规定元素应该生成的框的类型 2、文本属性:vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shadow:文本阴影效果 white-space:空白符的处理 unicode-bidi:设置文本的方向 3、盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、margin...

div+css中怎样在父盒里加背景图片并且都显示出来不被子盒子中的背景图...
那是不可能的吧……除非你让内层DIV不显示。或者让内层的坐标处于外层尺寸范围之外。如果有重复的话,内层肯定会挡住外层的啊。不过如果你设置FILTER的话,或许会达到背景朦胧重叠的效果。

常用的CSS属性。
float,css的一种属性,主要属性值为:left(左浮动)、none(不浮动)、right(右浮动)、inherit(继承父元素浮动),多用于网页排版。float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是...

css字与字之间的间距怎么调
1.在文件夹中创建一个“test”的html文件。如图所示 2.在里面添加html标签框架。如图所示 3.在里面添加一个“div”并放入文字。如图所示 4.然后我们发现默认文字之间比较紧凑。如图所示 5.现在我们给div设置一个id为“wd”。如图所示 6.通过css在style使用letter-spacing给wd中的文字设置字间距为30px...

浅谈css布局规则
CSS中组成一个块级盒子需要: Contentbox:?这个区域是用来显示内容,大小可以通过设置?width?和?height. Paddingbox:?包围在内容区域外部的空白区域;?大小通过?padding?相关属性设置。 Borderbox:?边框盒包裹内容和内边距。大小通过?border?相关属性设置。 Marginbox:?这是最外面的区域,是盒子和其他元素之间的空白区域...

浮动以及浮动的用处
没有被其他排版浮动和定位相关的CSS属性干扰的就叫标准流。HTML就是标准文档流的文件标准文档流中的空白折叠 在元素的内容中或者两个元素之间无论写多少个空格(或者换行),最终显示在浏览器上的都只有一个空格标准文档流的底部对齐 如果有文字,图片在同一行中,他们的高度不统一,最终显示在浏览器页面上的是以底部对齐...

相似回答