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;

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

相关推荐
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css