DIV子元素自适应问题，float父元素坍塌全解释

最新推荐文章于 2023-08-27 09:11:44 发布

mocas_wang

最新推荐文章于 2023-08-27 09:11:44 发布

阅读量1.4k

点赞数 1

分类专栏： javaWeb

本文链接：https://blog.csdn.net/mocas_wang/article/details/107866475

版权

javaWeb 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

float概述

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的
元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。
但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。
当然你可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念。

浮动（float）布局会使元素脱离文档流，不脱离文本流。元素无视它的存在，而元素其中的文本会围绕在它周围，但是它不会脱离DOM树，用浏览器的审查元素可以看到脱离文档流的它。
绝对定位position: absolute;和position: fixed;布局会使元素既脱离文档流，又脱离文本流。（元素和文本都定位不到它的存在）。
注：position: fixed;是position: absolute; 的一个子级，两者都是绝对定位。

float：none | left | right | inherit 默认值：none 元素不浮动，并会显示在其在文本中出现的位置。

常用的值为：left，right。

特点：

1.默认宽度为内容宽度；

2.脱离了文档流；

3.向指定方向一直移动；

4.float的元素在同一文档流；

5.float元素是半脱离文档流。（对元素脱离文档流，对内容仍在文档流）

主要应用场景：多列布局。

特性

特性1

元素‘浮动’

.脱离文档流

.但不脱离文本流

<style>
　　.container{
　　　　background: red;
　　　　width: 400px;
　　}
　　.p1{
　　　　background: green;
　　　　float: left;
　　　　width: 200px;
　　　　height: 50px;
　　}
</style>
<body>
　　<div class="container">
　　　　<span class="p1">float</span>
　　　　<div class="p2">
　　　　　　很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
　　　　</div>
　　</div>
</body>

这个效果很明显就是，p1设置了向左浮动，高度50，宽度200，背景绿色。浮动之后有什么影响呢？我们上面注意点之一是脱离了文档流。

我们看到p2在使用的时候占据了p1的空间，跟container是一样的空间大小。但是他影响了p2文字的展现。整个文字都绕开了p1。这种布局方式就是float本身的一个含义。float本身就是用于图文环绕效果的。所以这个解释了上面的注意点，float元素脱离了文档流，但是不脱离文本流。

这个效果很明显就是，p1设置了向左浮动，高度50，宽度200，背景绿色。浮动之后有什么影响呢？我们上面注意点之一是脱离了文档流。

特性2

.对自身的影响：

　　.形成“块”（BFC）

　　　　比如上面的例子，p1这个float元素可以设置宽高。span元素本身是无法设置宽高的。上面的p1中，float属性一旦去除，宽高就会失效

　　.位置尽量靠上

　　.位置尽量靠左(右)

<style>
　　.container{
　　　　background: red;
　　　　width: 400px;
　　}
　　.p1{
　　　　background: green;
　　　　float: left;
　　　　width: 200px;
　　　　height: 50px;
　　}
</style>
<body>
　　<div class="container">
　　　　<span>写几个字</span>
　　　　<span class="p1">
　　　　　　float
　　　　</span>
　　　　<span class="p1">
　　　　　　float
　　　　</span>
　　</div>
</body>

如图，首先看到的几个字，如果上面demo的p2一样。是一个正常的元素。我们说会尽量靠上和尽量靠左。所以是左上角的位置。再往下又有一个float元素，这两个float元素样式是一模一样的。但是那几个字是必须排的。所以他没办法越过那几个字。所以尽量靠上，靠左，就成了这副样子。

如果p1的宽度加起来小于 400减去字的长度，第二个元素就能往上。

如果，两个flaot元素长度加起来大于400了，他就会往下掉。。这就是尽量靠上，尽量靠左的含义。

特性 3

.对兄弟元素的影响

　　.上面贴非float元素（一般float元素上面贴的都是非float元素）

　　.旁边贴float元素（靠左，或者靠右的时候贴float元素）

　　.不影响其它块级元素位置

　　.影响其它块级元素内部文本（三四两点就是特性一说的脱离文档流，不脱离文本流）

.对父级元素的影响

　　.从布局上“消失”（相当于从父级的空间里面消失了，消失了意味着父级不会再管他的宽高）

　　.高度塌陷（因为在父级的空间里消失了，所以父级对高度有可能会塌陷，防止塌陷的办法就是overflow）

<style>
　　.float{
　　　　float: left;
　　　　width: 100px;
　　　　height: 100px;
　　　　background: red;
　　}
</style>
<body>
　　<div class="main">
　　　　<span class="float">
　　　　　　float元素
　　　　</span>
　　</div>
</body>

我们看到float元素的宽高是有100像素的，但是main的高度却是0，没有被撑起来。高度塌陷了,防止塌陷的常用办法就是设置overflow，创建一个BFC。

父元素由子元素高度撑起

底层原理：设置了float属性和display：absolute;会被自动转换为inline-block

如果子元素都为 display：inline-block属性，父元素设置成 display：inline-block 即可实现父元素高度由子元素高度撑起。（默认100%）

inline-block元素的特点是宽高如果不设置会根据内部元素撑起大小设置，而block元素则不然，block元素的高有内部元素撑起，宽默认100%；

1 父元素宽度百分百，子元素固定宽度，当父元素的宽度变小，子元素会被挤下去，如何让子元素的宽度决定父元素的宽度，让父元素的宽度被撑开？

1.若父元素下的子元素是行内元素（有固定宽度）

父元素 {
    white-space: nowrap;  // 子元素不被换行,超出部分 scroll 表现
}复制代码

2.若父元素下的子元素是块级元素（默认宽度百分百）

父元素 {
    white-space: nowrap;  // 子元素不被换行
    display: inline-block;
} 子元素 {
     display: inline-block;
 }复制代码

2 清除浮动的方法：

清除浮动的方法：

1.在父元素上添加overflow:hidden；zoom:1;

<div style="overflow: hidden;">
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
</div>

2.给父元素设置固定的高度

    height：100px;

3 使用伪类（好用的的放前面），操作简单兼容性高别问我为什么谁用谁知道，并且推荐使用一个公共的类名.clearFix来设置它，需要清除塌陷父元素只要调用这个伪类就够了，这样就会减少代码的冗余度：

//在父元素里添加这个类

.clearFix：after{
	content:"";//设置为空
	display:block;//将伪元素转化成块元素
	clear：both;//清除浮动
}

4 在子元素后面添加一个空的div（不会影响到其它元素），设置清除两边浮动（例）：

<div>
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
	<div style="clear:both;"></div>
</div>

5 给父元素设置成浮动来触发BFC。这样设置的坏处是不能用margin：auto；实现居中

<div style="float:left/right;">//父元素设置浮动
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
</div>

6 为父元素设置透明边框（例）：

<div style="border:1px solid transparent;">
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
</div>

7 使用inline-block触发BFC,当元素不是行内块元素时，可以通过display:inline-block的样式代码使之转化为行内块元素来触发BFC。

设置父元素display:inline-block;，这样设置的坏处是不能用margin：auto；实现居中

<div style="display:inline-block;">//父元素设施成行内块元素
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
</div>

8 给父元素设置成绝对/固定定位来触发BFC，因为绝对/固定定位能使父元素脱离了文档流（相对定位不可以）

<div style="position:absolute;">//父元素设置绝对定位
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
</div>

mocas_wang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录