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>

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

相关推荐
掘金安东尼11 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~14 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务16 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛16 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑20 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭26 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿30 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨40 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js