2、浮动的用法特点,解决父元素高度塌陷解决

一、浮动

用法:浮动就是使用float样式,使元素脱离文档流。属性值有三个:none默认left right

特点:

  • 常用于文字环绕图片
  • 浮动的元素脱离文档流
  • 影响其他元素排列
  • 造成父元素高度塌陷

1、一旦元素设置了浮动,元素就会脱离文档流,它原来在文档流得位置, 就会被它下面的元素挤上来

2、如果浮动元素它上面的元素不浮动,则浮动元素无法上移

3、浮动元素也不会超过它前面浮动元素

4、浮动元素不会超出它的父元素

5、当浮动元素遇到了文字,浮动元素不会覆盖文字, 文字会环绕在浮动元素的周围,从而有文字环绕图片的效果。 这也是设置浮动最开始的想要的效果。

6、当元素设置浮动以后,会完全脱离文档流,元素脱离文档流后, 元素原来在文档流得特点,就都没有了,也就是说不再区分块,行内,行内块。

二、解决父元素高度塌陷

1.场景

子元素都设置了浮动,父元素没有高度,导致父元素高度塌陷,无法自动的根据子元素撑开高度。

方法一:额外标签法

在父元素内容的最后添加一个块级元素,设置属性clear:both。

缺点:增加了页面结构

javascript 复制代码
        /* 一般都用clearfix */
        .clearfix{
            clear: both;
        }

方法二:单伪元素法

给父元素添加after伪类,清除浮动

javascript 复制代码
        /* 方法2:父元素添加after伪类 单伪元素法 */
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }

    <div class="father clearfix">

方法三: 双伪元素法(推荐)

用before可以解决外边距塌陷,相当于在父元素内部上方加了一个元素,子元素添加margin-top时,不会导致外边距塌陷。

用after可以清除浮动。

javascript 复制代码
         /* 方法3:双伪元素法 */
        /* before可以解决外边距塌陷 */
        .clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
        }
        /* 清除浮动 */
        .clearfix::after{
            clear: both;
        }

<div class="father clearfix">

方法四:overflow:hidden

父元素:overflow:hidden。溢出隐藏

添加之后会检查父元素的范围,高度也就呈现出来了

javascript 复制代码
            /* 4. */
            overflow: hidden;

方法五:父元素添加高度。

相关推荐
努力只为躺平2 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
李大玄4 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵5 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾10 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove17 分钟前
常见 npm 报错问题
前端·npm
sunbyte17 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子18 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua22 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
嘗_38 分钟前
暑期前端训练day5
前端
uncleTom66644 分钟前
前端布局利器:rem 适配全面解析
前端