css浮动定位详解（float属性）
这个属性用的少了，现在都用flex
本节讲浮动定位
1、什么是定位 元素该出现在网页的哪个位置处 2、定位方式 1、普通流定位 2、浮动定位 3、相对定位 4、绝对定位 5、固定定位 3、普通流定位 又称为 文档流定位 网页元素默认定位方式 页面元素 块级元素-从上到下的方式排列 行内元素-从左到右的方式排列 <body> <div id="d1">Hello</div> <div id="d2">World</div> <span>Hello</span> <span>World</span> </body> 4、浮动定位 1、什么是浮动定位 如果将元素的定位方式设定为浮动定位的话，那么它将具备以下特征 1、浮动元素 会被排除在文档流之外-脱离文档流，不占据页面空间，其他未浮动元素要上前补位 2、浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上 3、浮动元素依然位于包含框之内 4、浮动定位解决的问题-让多个块级元素在一行内显示 2、属性 属性：float 取值： 1、none 默认值，无浮动定位 2、left 左浮动，让元素停靠在父元素的左边，或紧挨着左侧已有的浮动元素 3、right 右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素 5、浮动引发的特殊效果 1、当父元素的宽度已显示不下所有的已浮动子元素时，那么最后一个子元素将换行显示 2、元素一旦浮动起来之后，元素的宽度将变成自适应(内容决定宽度)，前提：不指定元素宽度的情况下 3、元素一旦浮动起来之后，都将变成块级元素，尤其对行内元素影响较大 块级元素：允许修改尺寸 行内元素：不允许修改尺寸 4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的。 6、清除浮动影响 属性：clear 取值： 1、none 默认值，不做任何清除操作 2、left 清除该元素左边(上边)的浮动元素所带来的影响 3、right 清除该元素右边的浮动元素所带来的影响 4、both 清除该元素两边的浮动元素所带来的影响 7、浮动元素对父元素所带来的影响 由于浮动元素脱离文档流，所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话，那么该元素的高 度 将变成0 解决方案： 1、直接设置父元素高度 弊端：必须要知道父元素高度是多少 2、设置父元素也浮动 弊端：对后续元素会带来位置的影响 3、为父元素设置 overflow 属性 取值：hidden 或 auto 弊端：如果有内容要以溢出的方式显示的话，也一同被隐藏了。 4、在父元素中，追加空子级块级元素，并设置其clear属性值为 both
