css样式使用浮动会塌陷，css浮动的影响

HTML图片和文字一样高进行float为什么文字会塌陷

1、html中调整位置使用css的float属性。

2、HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。

3、准备一张图片，新建一个空白html文件 其中html文件内容如下图所示，html中包含了一张图片，及对应的描述段落 给html添加head标签，在标签中定义样式。

相关问答

Q1: CSS布局浮动(float)和定位(position)属性的区别和如何使用

若同时设置float和position，如果设置相对定位，先浮动，再定位。设置绝对定位，则float不生效。

两者是有绝对的区别的，float是时元素浮动，而position是用来给一个元素定位的。float的定义和常见用法：float属性定义元素在哪个方向浮动。

并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是可能需要注意的地方。并且如果要考虑到古老的IE6之类的还会有一些bug诸如双边距等等问题。而position顾名思义就是定位。

在CSS 中，用 float 和 position的区别如下：Float属性 float的属性值有none、left、right，有几个要点：只有横向浮动，并没有纵向浮动。

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

float是浮动的意思，分为左浮动，右浮动。左浮动的时候，元素一排排的往左边排列。position是定位的意思，分为相对定位，绝对定位，固定定位，静态定位。position的定位比较灵活，可以自己选择定位的具体位置。

Q2: 在css中什么叫高度垂直塌陷

在文档流中，父元素的高度默认是被子元素撑开的，即子元素多高，父元素多高。但是为子元素设置浮动后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素，父元素高度塌陷。

高度塌陷，容器用相对定位，没有设置高度，容器内部元素和内容无法把容器撑开，高度塌陷。解决方法是设置容器height：auto；相对定位的容器可以被撑开，使得高度不塌陷。

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。

首先我们先看出现外边距塌陷的三种情况：当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较大者。

css样式使用浮动会塌陷的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css浮动的影响、css样式使用浮动会塌陷的信息别忘了在本站进行查找喔。