DIV+CSS 内容浮动溢出

html-css07

DIV+CSS 内容浮动溢出,第1张

引起原因:

div部分没有在两个div后面清楚浮动,导致浮动溢出

确认方法:在包含两个div的父级处添加border来查看是否包含子级。

解决方法:

<div class="a"></div>

<div class="b"></div>

<div style="clear:both"></div>

其中<div style="clear:both"></div>是清除浮动的意思。

2.宽度或者高度被限制,查看父级的最大高度和宽度是否设置了固定高度而子级的大小超过了最大限制。

解决方法:仔细查看即可。

3.JS影响。

一些JS的确会影响到页面布局问题,但是不经常出现。

确认方法:

去除一下JS后,看看有没有效果,如果没有,说明不是JS 的问题。

<div class"p">我是长长长长长长长长长长长长长长长长长长长长文字</div> .p{

    width:200px

    overflow: hidden

    text-overflow:ellipsis

    white-space: nowrap

}

可以这样弄,给他设置一个宽度,然后设置强制不换行,超出部分隐藏,超出文字设置成省略号

朋友,overflow具体如何定义溢出内容,要看你给定的值来具体处理。

overflow:visible,这个就是默认值。内容不会被修剪,会呈现在元素框之外。

overflow:hidden,这个值代表的是内容会被修剪,并且其余内容是不可见的。 

overflow:scroll,这个值代表内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

overflow:auto,这个代表如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

overflow:inherit,这个代表规定应该从父元素继承 overflow 属性的值。

这些值才是overflow处理溢出内容的关键,根据需求设置不同的值即可。