CSS浮动

浮动

可以让块级元素待在一行,紧挨着,没有空格

float:left

  1. 浮动的元素会脱离正常的文档系统,像浮云一样飘起来
  2. 浮动元素后面的正常元素会自动补位
  3. 浮动元素会被父元素的宽高所束缚,所以不算完全的脱离文档流
  4. 当浮动元素的上一行是正常元素时,这个浮动元素只能待在当前行,不能跑到上一行
  5. 左浮动:元素向左跑,会从上一行最右边出来继续跑,直到遇到做浮动元素,紧贴着他
  6. 右浮动:元素向右跑,会从上一行最左边出来继续跑,直到遇到做浮动元素,紧贴着他
css 复制代码
        ul{
            width: 800px;
        }
        ul li{
            float: left;
            list-style-type: none;
            list-style-position: inside;
            padding: 20px;
        }
        img{
            width: 100px;
            height: 100px;
        }
css 复制代码
    <ul>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
    </ul>

清除浮动

规定元素哪一侧不能有浮动元素

清理元素左侧的浮动:

css 复制代码
   clear: left;

元素右侧无浮动元素,记得考虑页面的加载顺序:

css 复制代码
   clear: right;

元素左右侧都无浮动元素:

css 复制代码
   clear: both;

父元素高度塌陷

(子元素)li设置了浮动,不能给父元素撑起高度(父元素未设置高度),因而会造成塌陷,如下图所示:

css 复制代码
        ul{
            width: 800px;
            border: 1px solid red;
        }

清除浮动的方法

  1. 给父元素(块级元素)设置高度
  2. 在元素内容之后加一个块级元素,并设置左右两侧都无浮动元素
  3. (不增加元素的前提下)使用伪元素的方法,并将其转化为表格元素
css 复制代码
        ul::after{
            content: "";
            display: table;
            clear: both;
        }

统一设置,可将其设置为一个类,这样只需要在父元素中引入类名即可:

css 复制代码
        .clearfix::after{
            content: "";
            display: table;
            clear: both;
        }
css 复制代码
    <ul class="clearfix">
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
    </ul>

注意:父元素设置有高度时,不用清除浮动

相关推荐
慧一居士25 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead27 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app