css解决浮动导致父元素高度坍塌的几种方法解决浮动导致父元素高度坍塌的几种方法
以前布局经常会用到float进行布局，但是我们都知道使用浮动布局会存在一个问题-导致父元素高度坍塌
那我们一起来探究一下解决这个问题的方法！就先从文档流开始吧
一一.定位的分类定位的分类
普通流定位
浮动定位
相对定位
绝对定位
①普通流定位普通流定位
又称为默认文档流定位
1.每个元素在页面上都有自己的空间
2.每个元素都是从父元素的左上角开始渲染（显示）
3.块级元素按照从上到下逐个排列，每个元素单独成行
4.行内元素是多个元素在一行中显示，从左往右顺序排列，显示不下换行
②浮动定位浮动定位
让块级元素横向显示
float：
取值：left 让元素浮动后，在当前行停靠在父元素的左侧，或者挨着左侧已浮动元素
right让元素浮动后，在当前行停靠在父元素的右侧，或者挨着右侧已浮动元素
none 默认值，不浮动
浮动的特点浮动的特点
1.元素一旦浮动，脱离文档流(不占页面空间，后面未浮动元素会上前补位)
2.浮动元素会在当前行，停靠在父元素的左/右边，或者停靠在其他已浮动元素的边缘
3.当父元素横向显示不下所有浮动元素时，最后显示不下的，会自动换行
4.浮动用于解决，多个块级元素在同一行显示的问题
③浮动定位引发的特殊情况浮动定位引发的特殊情况
1.浮动元素占位的问题
当元素显示不下所有浮动元素时，最后显示不下的元素会换行
但是，已浮动元素会根据自己的浮动方向占据位置，
导致被挤下去的浮动元素，需要让开位置，在更下面的地方显示
2.元素一旦浮动，如果元素未定义宽度，那么元素浮动之后的宽度将以内容为准
3.元素一旦浮动，都会变成块级元素
允许设置尺寸，可以设置垂直外边距
4.文本，行内元素，是不会被浮动元素压在下面的。而是巧妙的避开，环绕着浮动元素显示
以前经常利用浮动这一特点做文本环绕图片的效果
来写个小demo:
资源评论
weixin_38518668
- 粉丝: 4
- 资源: 984
