开启BFC方式：

1.设置浮动float（副作用比较大，不推荐）

2.将元素设置为行内块元素 display:inline-block；(不推荐)

3.将元素的overlfow设置为非visible的值

overflow:scoll;(带滚动条)

overflow:auto;

overflow:hidden;（常用）

查看代码 


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        header,main,footer{

            width:600px;

            margin: 0px auto;

        }

        header{

            background-color: aqua;

            height: 50px;

        }

        main{

            overflow: hidden;

            background-color: yellow;

        }

        .nav,.content,.aside{

             float: left;

            height: 400px;

        }

        .nav{

            width:100px;

            background-color: red;

        }

        .content{

            width:380px;

            background-color: violet;

            margin: 0px 10px;

        }

        .aside{

            width: 100px;

            background-color: red;

        }

        footer{

            height: 50px;

            background-color: aqua;

        }

    </style>

</head>

<body>

    <!-- 网页的头部 -->

    <header>

    </header>

    <!-- 网页的主体 -->

    <main>

        <div class="nav"></div>

        <div class="content"></div>

        <div class="aside"></div>

    </main>

    <!-- 网页的底部 -->

    <footer></footer>

</body>

</html>

黄色背景随着main中的三部分的高度变化而变化

float高度塌陷和BFC的更多相关文章

  1. 关于float高度塌陷问题

    和所有刚入门的菜鸟一样,我发现float有高度塌陷问题,又很偶然的发现float元素后加<img/>能消除float带来的破坏性. 后来百度了一下,大部分的float高度塌陷问题都没有提及 ...

  2. 整理高度塌陷与BFC

    当面试官问道你高度塌陷时,人们第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: h ...

  3. 高度塌陷与BFC

    高度塌陷的产生条件 子元素浮动,脱离文档流 子元素绝对定位或固定定位,脱离文档流 定位产生的高度塌陷只能通过加固定高度或更换其他方案解决塌陷,本文主要讨论浮动产生塌陷的解决方法. 高度塌陷的解决方法 ...

  4. 高度塌陷与 BFC

    1. 高度塌陷 在浮动布局中,父元素的高度默认是被子元素撑开的  当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失  父元素高度丢失以后,其下的元 ...

  5. 加overflow-hidden就可以解决高度塌陷问题，overflow-触发BFC

    1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position ...

  6. 浅谈BFC与高度塌陷

    这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...

  7. 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

    浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

  8. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  9. CSS: inline-block的应用和float块高度塌陷

    普通流高度塌陷: 当块float浮动时,不会对块布局产生影响,块仍然会按照左右或者上下的顺序排列.但是会影响文档的排列,当文档的高度超过块的高度时,块的高度会产生塌陷现象.   高度塌陷解决方法:   ...

  10. float浮动造成高度塌陷的解决办法

    Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...

随机推荐

  1. vue学习笔记（七）---- vue中的路由

    一.什么是路由 对于普通的网站来说,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源 对应单页面的应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,h ...

  2. http八股 跨域的本质 请求行 请求头 请求体 xss

    1小八股 介绍 http 请求分为三个部分,请求行,请求头,请求体 还有状态码的含义 https://juejin.cn/post/7096317903200321544 2tips Content- ...

  3. 分布式配置nacos搭建踩坑指南(下)

    上一篇介绍了在配置nacos中的碰到的坑,这一篇介绍一下如何正确进行nacos的环境搭建和配置,所以本文分为两部分,第一部分为环境搭建,介绍如何安装和运行.第二部分为alibaba Sprint Bo ...

  4. 从 Newtonsoft.Json 迁移到 System.Text.Json

    一.写在前面 System.Text.Json 是 .NET Core 3 及以上版本内置的 Json 序列化组件,刚推出的时候经常看到踩各种坑的吐槽,现在经过几个版本的迭代优化,提升了易用性,修复了 ...

  5. java基础（完整版）

    java javaSE 注释: block块级 line 行 标识符和关键字 组成部分.变量名.类名.方法名--------标识符 $\数字._\字母 数据类型 强类型语言---安全性高--速度会慢 ...

  6. js原型链污染详解

    前言 之前打某湖论剑,两道js的题,给我整懵逼了,发现以前都没对js做过多少研究,趁着被毒打了,先研究一波js原型链,未雨绸缪. 基础 protype 首先我们研究js原型链,得搞明白原型是什么,这里 ...

  7. [代码审计基础 15]phpmcs_v9.6 rce

    PHP:5.4.5 设置调试:https://blog.csdn.net/m0_46641521/article/details/120107786 版本:phpcms_v9.6.0_UTF8 0x0 ...

  8. 代码随想录算法训练营day18 | leetcode 513.找树左下角的值 ● 112. 路径总和 113.路径总和ii ● 106.从中序与后序遍历序列构造二叉树

    LeetCode 513.找树左下角的值 分析1.0 二叉树的 最底层 最左边 节点的值,层序遍历获取最后一层首个节点值,记录每一层的首个节点,当没有下一层时,返回这个节点 class Solutio ...

  9. GIS若干相关的概念

    投影 常用的投影坐标系: CGCS2000_3_Degree_GK_CM_111E CGCS2000_3_Degree_GK_Zone_37 CGCS2000_GK_Zone_19 Beijing_1 ...

  10. 子路由path路径带 ‘/‘与不带

    子路由不带 / : $router.push('/layout/home') 浏览器地址栏显示: http:xxxxxxxxxx/layout/home 带 / : $router.push('/us ...