css浮动定位详解（float属性）

有蝉

已于 2022-03-17 17:17:18 修改

阅读量4.3k

点赞数 3

分类专栏： css 文章标签： css浮动定位 css的float属性

于 2019-05-21 10:52:29 首次发布

本文链接：https://blog.csdn.net/qq_37899792/article/details/90402462

版权

css 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

这个属性用的少了，现在都用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