父级div没高度不能自适应高度的原因—

　　好久没写博客了，最近捡起前端代码开始码，一些基本的东西都忘记了，觉得自己停滞不前的原因就是没做好巩固——废话

　　我们常常在做盒子嵌套的时候，最外层盒子不想给他设置高度，因为我们填充的内容不确定有多大，一般就选择auto自适应。

　　然，子级盒子又是一个嵌套或者样式复杂点，超出父级盒子的边界外边，在央视里面调来调去调不好，试过修改display属性、又再嵌套盒子，都不是很理想，最后找了一圈（强大的百度）发现问题所在了，这个是由于浮动产生原因。

初始代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>div_自适应</title>
 5     <style type="text/css">
 6     .div1{ 7         border: 1px solid #ccc;
 8         width: 500px;
 9         padding: 20px;}
10     .div_l{11         float: left;
12         background-color: lightgreen;
13         width: 200px;
14         height: 200px;}
15     .div_r{16         float: right;
17         background-color:green;
18         width: 200px;
19         height: 200px;}
20     </style>
21 </head>
22 <body>
23     <div class="div1">
24         <div class="div_l">div_l</div>
25         <div class="div_r">div_r</div>
26     </div>
27 </body>
28 </html>

效果图如上，按照代码中div的需要，给父级div设置height=200px即可，若子级div数据较多，或者从后台调取数据进行添加时，设置的高度又不适用了。

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>div_自适应</title>
 5     <style type="text/css">
 6     .div1{ 7         border: 1px solid #ccc;
 8         width: 500px;height: 200px;
 9         padding: 20px;}
10     div div{11         float: left;
12         margin-right: 50px;
13         margin-bottom: 50px;
14         background-color:green;
15         width: 200px;
16         height: 200px;}
17     </style>
18 </head>
19 <body>
20     <div class="div1">
21         <div class="div_1">div_1</div>
22         <div class="div_2">div_2</div>
23         <div class="div_3">div_3</div>
24         <div class="div_4">div_4</div>
25     </div>
26 </body>
27 </html>

效果图如下：

方法一：对父级加 overflow 样式

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>div_自适应</title>
 5     <style type="text/css">
 6     .div1{ 7         border: 1px solid #ccc;
 8         width: 500px;height: 200px;
 9         padding: 20px;
10         overflow: hidden;/*overflow:*/}
11     div div{12         float: left;
13         margin-right: 50px;
14         margin-bottom: 50px;
15         background-color:green;
16         width: 200px;
17         height: 200px;}
18     </style>
19 </head>
20 <body>
21     <div class="div1">
22         <div class="div_1">div_1</div>
23         <div class="div_2">div_2</div>
24         <div class="div_3">div_3</div>
25         <div class="div_4">div_4</div>
26     </div>
27 </body>
28 </html>

效果如下：

治标不治本，我要的是自适应高度，要都显示。

方法二：对子级使用 clear 清除浮动

插入一个空的div盒子，用来做清除浮动，代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>div_自适应</title>
 5     <style type="text/css">
 6     .div1{ 7         border: 1px solid #ccc;
 8         width: 500px;
 9         padding: 20px;
10         }
11     .div_1,.div_2{12         float: left;
13         margin-right: 50px;
14         margin-bottom: 50px;
15         background-color:green;
16         width: 200px;
17         height: 200px;}
18         .clear{ clear:both}
19     </style>
20 </head>
21 <body>
22     <div class="div1">
23         <div class="div_1">div_1</div>
24         <div class="div_2">div_2</div>
25         <div class="div_2">div_3</div>
26         <div class="clear"></div>
27     </div>
28 </body>
29 </html>

OK了，效果如下：

转载于:https://www.cnblogs.com/charmingyj/p/7132301.html

父级div没高度不能自适应高度的原因——子级使用css float浮动相关推荐

解决子级用css float浮动而父级div没高度不能自适应高度
当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 方法一:对父级设置固定高度此方法可用于能确定父级div内子级对象高度. 缺点: 父级是固定高度,而不随 ...
如何获取元素在父级div里的位置_关于元素的浮动你了解多少
首先,在介绍什么是浮动之前我们先介绍一下html中元素的普通流布局方式.在普通流中,元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的,在排列过程中所有的行内元素水平排列,直到当行被占 ...
在vue中使用echarts根据父级div大小自动适应大小
首先,你需要在组件中引入 ECharts.然后,你可以在组件的 mounted 钩子函数中初始化 ECharts 实例,并在组件的 template 中渲染 ECharts. 在 mounted 钩子 ...
CSS - table超出父级div
用到div包裹table的布局,想要的效果是table的宽度等于div宽度,超出内容省略号显示. 听起来很简单啊,设置table宽度为100%,省略号三行代码往上一粘,心想着大功告成. but!!!! ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
DIV默认高度且自适应高度
2019独角兽企业重金招聘Python工程师标准>>> 转: 本文和大家重点讨论一下如何控制DIV最小高度又DIV自适高度问题,如果我们需要设置一个div高度,当里面的东西超过这个高 ...
html 获得div的高度,如何用js获取div不确定的自适应高度（currentStyle与offsetHeight）...
设计网页时,一些元素(如div)因显示的内容多少事先不确定,所以不能固定高度,也就是让它根据内容的多少自动调整高度,即自适应高度. 对于div元素不确定的自适应高度,如何用js获取当前高度呢?一般有两 ...
CSS-实现不同尺寸大小图片自适应父级DIV
介绍:有时我们放置图片时,因为父级元素固定了大小导致图片比例失调或者是图片被裁剪,体验非常不好.下面介绍一个简单的方法(初学者,欢迎大家提出建议) HTML: <div class=" ...
CSS float浮动规则以及父元素高度塌陷的解决方法
本文不讲float的所有内容,只浅谈float对不同高度块之间浮动结果的规则以及父元素高度塌陷的解决方法. 首先看一个小问题,就是float会导致父容器的高度塌陷,如下代码: <head> ...

父级div没高度不能自适应高度的原因——子级使用css float浮动

父级div没高度不能自适应高度的原因——子级使用css float浮动相关推荐

最新文章

热门文章