搜索
您的当前位置:首页正文

cssdiv设置float后高度不能自动增加_html/css

2023-11-27 来源:软文情感网

目前用来清除“闭合(清除)浮动”的方法,主要是一下四种: 1. 额外标签法

这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。我个人不喜欢这种方法,但是它确实是W3C推荐的方法

或者使用

2. 使用after伪类

这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html 比较干净,所以用得还是比较多的。

以下为引用的内容:#outer:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; } 3. 设置overflow为hidden或者auto

这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面

4. 浮动外部元素,float-in-float

这种做法就是让父容器也浮动,这利用到了浮动元素的一个特性??浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显??父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。

小编还为您整理了以下内容,可能对您也有帮助:

div定义float:left;后height不会自适用高度,怎么解决

楼主有两种方法可以避免这样的 第一种就是: 后面加个DIV清楚浮动;建议不使用这方法;

<div class="b">无标题文档无标题文档无标题文档</div>

<div class="c">有文档有标签文档有标签文档有标签文档有标签文档有标签文档</div>

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

第二种就是你给.a加个属性{ overflow:auto;} 就可以了,这样比第一种节约了代码;

zoom: 1; overflow:auto; 两个一起才是清楚浮动! 望采纳!!~

css子元素浮动后父元素高度不能自动撑开

1、首先新建一个html文件,命名为test.html。

2、在test.html文件内,使用p标签创建两行文字,代码如下。

3、在test.html文件内,设置第一个p标签id属性为mp,主要用于下面使用css设置该p元素隐藏。

4、在test.html文件内,编写标签<style type="text/css"></style>,下面将在标签内编写css样式。

5、在css标签内,使用css设置p标签的行高为30px,在浏览器运行test.html。

6、在css标签内,对id为mp的p元素样式进行单独定义,通过dispay属性设置为none,实现该p元素隐藏不可见。

7、最后在浏览器打开test.html文件,查看实现的效果。

CSS父元素没有设置高度,元素浮动后父元素无法跟随子元素的高度-_-

最开始就是这样子啦,可是我脑子一热,想让b浮动(工作中确实会遇到这种情况),然后float:left;,发现父元素没高度了(看起来就像父元素没了)。

就像这样子:

(其实我最开始是发现给了个border-bottom属性,它跑去顶部了)

这种情况,给父元素一个height值就可以了,可是我不能给它一个固定的高度,我想让它随内容的高度变化。

怎么办呢。

诶,我想到一个办法:

我在父元素最后添加了一个空的元素c,用c清空左右浮动,就又回到最开始的效果了,而且动态添加其他元素的话,父元素高度也会像开始那样随之变化了。

div高度不能随内容增加而增加的问题?

高度的自适应(父div高度随子div的高度改变而改变):
1、如果父div不定义height、子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。
代码:
<style type="text/css">
#aa{ border:#000000 solid 5px}
#bb{border:#00ffff solid 5px;}
#cc{ border:#0033CC solid 5px}
</style>
<div id="aa">父div
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>
2、如果父div定义height,子div均为标准流的时候,在IE下父div的height随内容变化而变化,ff中则固定大小,如父div设置height:50px
代码:
<style type="text/css">
#aa{ border:#000000 solid 5px;height:50px}
#bb{border:#00ffff solid 5px;}
#cc{ border:#0033CC solid 5px}
</style>
<div id="aa">父div
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>
3、如果子div使用了float属性,此时已经脱离标准流,父div不会随内容的高度变化而变化,解决的办法是在浮动的div下面,加一个空div,设置clear属性both
未加空div代码:
<style type="text/css">
#aa{ border:#000000 solid 5px;}
#bb{border:#00ffff solid 5px;float:left}
#cc{ border:#0033CC solid 5px;float:left}
</style>
<div id="aa">父div
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>追问当前这样,我应该修改什么?

div高度不能随内容增加而增加的问题?

高度的自适应(父div高度随子div的高度改变而改变):
1、如果父div不定义height、子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。
代码:
<style type="text/css">
#aa{ border:#000000 solid 5px}
#bb{border:#00ffff solid 5px;}
#cc{ border:#0033CC solid 5px}
</style>
<div id="aa">父div
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>
2、如果父div定义height,子div均为标准流的时候,在IE下父div的height随内容变化而变化,ff中则固定大小,如父div设置height:50px
代码:
<style type="text/css">
#aa{ border:#000000 solid 5px;height:50px}
#bb{border:#00ffff solid 5px;}
#cc{ border:#0033CC solid 5px}
</style>
<div id="aa">父div
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>
3、如果子div使用了float属性,此时已经脱离标准流,父div不会随内容的高度变化而变化,解决的办法是在浮动的div下面,加一个空div,设置clear属性both
未加空div代码:
<style type="text/css">
#aa{ border:#000000 solid 5px;}
#bb{border:#00ffff solid 5px;float:left}
#cc{ border:#0033CC solid 5px;float:left}
</style>
<div id="aa">父div
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>追问当前这样,我应该修改什么?

html div 高度怎么不自动增加?

html div 高度不自动增加,这个问题的你要div自动增加,那么它必须要有height:auto;自增的这个属性的,还有你的上一级div高度已经设置了的话,这个div的高度到了,也不会增加了,这里我提交一段代码你可以看下,

html>
<head>
<style>
#div1{
height:auto;
widht:400px;

}
</style>

</head>

<body>
<div id='div1'>
<p>我只是一个测试的文字</p>

</div>
</body>

</html>

html div 高度怎么不自动增加?

html div 高度不自动增加,这个问题的你要div自动增加,那么它必须要有height:auto;自增的这个属性的,还有你的上一级div高度已经设置了的话,这个div的高度到了,也不会增加了,这里我提交一段代码你可以看下,

html>
<head>
<style>
#div1{
height:auto;
widht:400px;

}
</style>

</head>

<body>
<div id='div1'>
<p>我只是一个测试的文字</p>

</div>
</body>

</html>

如何解决子div设置float后会导致父div无法自动撑开的问题

本篇文章分享给大家的内容是关于子div设置float后会导致父div无法自动撑开,内容很详细,接下来我们就来看看具体的内容,希望可以帮助到大家。

原因:内部的p因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的p不会被撑开。

以下是几种解决办法(假设父p的class为“container”):

方法1、使用伪类

container::after{

display: block;

height:0;

content: '';

clear: both;

}

container{

display: inline-block; /*第一种撑开办法,底下会有部分被遮到,所以添加这行,就完美了*/

}方法2、不撑开的原理是overflow不可见,所以给父p添加overflow:auto;就行,IE要用_height:1%;

container{

overflow: auto;/*让主要内容区随内容自动撑开*/

overflow-y:hidden;/*把出现的滚动条隐藏,但是底下会被遮到一点,不完美*/

_height:1%;/*对IE的hack*/

}方法3、可以专门最后添加一个子p用来清除浮动:<p class="clear"></p>

设置样式.clear{clear:both; font-size:0; height:1%;}

方法4、可以设置父p的高度(也就是手动撑开,不灵活);

方法5、直接给父p设置 display: inline-block; 这样也自动撑开

方法6、直接给子p设置 display: inline-block; 也能自动撑开,但是排版问题有待研究学习

方法7、从网上还发现了一种方法,给父p增加属性:display:table;

方法8、 子p浮动我就套不住你?OK,我让父p也浮动: 父p设置 float: left; 也可以

Css—float的影响和解决方案

推荐俩种依靠clear属于清除浮动的方法,推荐第二种,探究的记录在后面,赶时间的看个开头就好了。

1. 在受浮动坍塌的父级元素结束标签前,添加一个高宽为0的空div,然后设置 clear:both

2 .创建一个clearfix样式,并使用伪类元素 after 添加样式到父元素上

无论是块级元素还是行内元素设置了浮动之后都会生成一个块级框,并且可以编辑它的宽高,此时该浮动元素就脱离了文档流。举个例子,把网页看成一个三维的泳池,文档流在泳池底部,给文档流中一个元素设置了float之后,它就从这个网页的泳池底部浮动到了水上。此时同级的块级元素会无视float元素在网页上的位置进行布局。但是行内元素并不会被遮挡,而是像和它一起浮在水面上一样环绕这个浮动元素。

根据前面介绍,元素设置float后好像会从网页上浮一样,脱离文档流。这样的话,如果父级元素原本没设置高度,计划用子元素撑开父级元素。此时子元素因为float上浮,则父级元素的高度就会因为自身没设置而坍塌。

来个示例 ( 下文都是依据这个示例来讨论,故先给出HTML结构和CSS样式 ):

让我们再打开开发者工具具体看看

然后让我们把父元素也一同浮动看看

例如:

此时背景色为粉色的 ch2 就会被浮动的 背景色半透明的ch1 覆盖,但是ch2的字体还是环绕着ch1

如果让ch2 也浮动,则ch1 和 ch2 就相当于一同浮起到这个网页泳池的水面上。

另外,ch2 虽然不浮动起来时会被 同级ch1遮挡,但是ch2 它内部的行内元素却是环绕 ch1 的 ,同时 ch2 内部的块级元素还是会被浮动起来的ch1遮挡。

解决父元素高度坍塌的问题,其实可以给父元素指定个高度,但这样就没有父元素高度自适应的意义了;另外全部元素一起浮动也能解决父元素坍塌,子元素被遮挡的问题,但这本质上只是将所有元素一起浮动到顶端,并没有解决问题,反而还会影响另外的元素排列。下面介绍clear属性来清除浮动

那我们先来看看 clear 属性有什么用

我们稍稍改动一下上面的例子在 ch2 下加一个 p 标签然,然后改动一下 ch1 和 ch2 的样式让它们俩高度不一样。

若此时我们给p元素也加上浮动呢?

样例:

软文情感网还为您提供以下相关内容希望对您有帮助:

div定义float:left;后height不会自适用高度,怎么解决

楼主有两种方法可以避免这样的 第一种就是: 后面加个DIV清楚浮动;建议不使用这方法;&lt;div class="b"&gt;无标题文档无标题文档无标题文档&lt;/div&gt; &lt;div class="c"&gt;有文档有标签文档有标签文档有标签文档有标签文档有标签文档...

css子元素浮动后父元素高度不能自动撑开

1、首先新建一个html文件,命名为test.html。2、在test.html文件内,使用p标签创建两行文字,代码如下。3、在test.html文件内,设置第一个p标签id属性为mp,主要用于下面使用css设置该p元素隐藏。4、在test.html文件内,...

如何解决子div设置float后会导致父div无法自动撑开的问题

原因:内部的p因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的p不会被撑开。以下是几种解决办法(假设父p的class为“container”):方法1、使用伪类container::after{ display: block; height:0; ...

CSS父元素没有设置高度,元素浮动后父元素无法跟随子元素的高度-_-

最开始就是这样子啦,可是我脑子一热,想让b浮动(工作中确实会遇到这种情况),然后float:left;,发现父元素没高度了(看起来就像父元素没了)。就像这样子:(其实我最开始是发现给了个border-bottom属性,它跑去顶部了)这种...

【html】设置元素浮动之后第二行的div块为什么不自动向上浮动呢??_百度...

你想做瀑布流布局,,,可以直接用JQ的瀑布流插件,或者网上搜索有现成的例子。纯CSS的话,呼,只能通过定位来做,而且不方便。可以试试CSS3 &lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="...

div高度不能随内容增加而增加的问题?

3、如果子div使用了float属性,此时已经脱离标准流,父div不会随内容的高度变化而变化,解决的办法是在浮动的div下面,加一个空div,设置clear属性both 未加空div代码:&lt;style type="text/css"&gt; aa{ border:#000000 solid...

html css里这三个做在一个大的里面 但是右边的那个框用了float了...

表示看不到css代码,不解释!

CSS里设置了浮动,不起作用为什么?

在div+css中浮动不起作用,可能是原因是你设置flaot的这个元素不是块级元素,所以float对它是不起任何作用的,如span和a这些标签,我这里写个代码:&lt;html&gt; &lt;head&gt; &lt;style&gt; sub{ //通过id实现 width:300px;//只是假定...

html中关于div不能自动调整大小

应该在第一行写一个div包含div1和div2,在这个大div的结尾标签之前写一个div属性是清除所有浮动(因为浮动貌似会影响自适应的),另外div的高度尽量都用auto

Css—float的影响和解决方案

但是行内元素并不会被遮挡,而是像和它一起浮在水面上一样环绕这个浮动元素。根据前面介绍,元素设置float后好像会从网页上浮一样,脱离文档流。这样的话,如果父级元素原本没设置高度,计划用子元素撑开父级元素。此时子元素...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

  • 读《杜工部集》二首的全文 读《杜工部集》二首的全文是什么

    《读《杜工部集》二首》贯休全文:造化拾无遗,唯应杜甫诗。岂非玄域橐,夺得古人旗。日月精华薄,山川气概卑。古今吟不尽,惆怅不同时。甫也道亦丧,孤身出蜀城。彩毫终不撅,白雪更能轻。命薄相如命,名齐李白名。不知耒阳令,何以葬先生。

  • 读《杜工部集》二首的全文是什么

    《读《杜工部集》二首》贯休全文:造化拾无遗,唯应杜甫诗。岂非玄域橐,夺得古人旗。日月精华薄,山川气概卑。古今吟不尽,惆怅不同时。甫也道亦丧,孤身出蜀城。彩毫终不撅,白雪更能轻。命薄相如命,名齐李白名。不知耒阳令,何以葬先生。

  • 读《杜工部集》二首的全文

    《读《杜工部集》二首》贯休全文:造化拾无遗,唯应杜甫诗。岂非玄域橐,夺得古人旗。日月精华薄,山川气概卑。古今吟不尽,惆怅不同时。甫也道亦丧,孤身出蜀城。彩毫终不撅,白雪更能轻。命薄相如命,名齐李白名。不知耒阳令,何以葬先生。

  • 读《杜工部集》二首全文

    《读《杜工部集》二首》贯休全文:造化拾无遗,唯应杜甫诗。岂非玄域橐,夺得古人旗。日月精华薄,山川气概卑。古今吟不尽,惆怅不同时。甫也道亦丧,孤身出蜀城。彩毫终不撅,白雪更能轻。命薄相如命,名齐李白名。不知耒阳令,何以葬先生。

  • 读《杜工部集》二首的朝代是什么

    《读《杜工部集》二首》贯休朝代:唐代

Top