float高度塌陷和BFC
开启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的更多相关文章
- 关于float高度塌陷问题
和所有刚入门的菜鸟一样,我发现float有高度塌陷问题,又很偶然的发现float元素后加<img/>能消除float带来的破坏性. 后来百度了一下,大部分的float高度塌陷问题都没有提及 ...
- 整理高度塌陷与BFC
当面试官问道你高度塌陷时,人们第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: h ...
- 高度塌陷与BFC
高度塌陷的产生条件 子元素浮动,脱离文档流 子元素绝对定位或固定定位,脱离文档流 定位产生的高度塌陷只能通过加固定高度或更换其他方案解决塌陷,本文主要讨论浮动产生塌陷的解决方法. 高度塌陷的解决方法 ...
- 高度塌陷与 BFC
1. 高度塌陷 在浮动布局中,父元素的高度默认是被子元素撑开的 当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失 父元素高度丢失以后,其下的元 ...
- 加overflow-hidden就可以解决高度塌陷问题，overflow-触发BFC
1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position ...
- 浅谈BFC与高度塌陷
这个概念我大概是去年时候接触到的吧,略略记录了一下,没有深入研究,恰逢最近秋招,在这里写一写,顺便加深自己的印象. 什么是BFC? 页面中的元素都隐含一个属性Block Formatting Cont ...
- 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)
浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...
- css float父元素高度塌陷
css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...
- CSS: inline-block的应用和float块高度塌陷
普通流高度塌陷: 当块float浮动时,不会对块布局产生影响,块仍然会按照左右或者上下的顺序排列.但是会影响文档的排列,当文档的高度超过块的高度时,块的高度会产生塌陷现象. 高度塌陷解决方法: ...
- float浮动造成高度塌陷的解决办法
Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...
随机推荐
- spring in action day07 RabbitMq
一:安装RabbitMq 记录下本人在win10环境下安装RabbitMQ的步骤,以作备忘. 第一步:下载并安装erlang erlang和rabbitmq对应版本说明:https://www.rab ...
- 计算机网络基础06-Email应用
1 构成组件 邮件客户端 邮件服务器 SMTP协议 Simple Mail Transfer Protocol 1.1 邮件客户端 读写Email消息 和服务器交互,收发消息 1.2 邮件服务器 邮箱 ...
- spring cloud alibaba - Nacos 下载安装
1.关于名字 前四个字母分别为Naming和Configuration的前两个字母,最后的s为Service 2.是什么 一个更易于构建云原生应用的动态服务发现,配置管理和服务管理中心.是注册中心和配 ...
- 强大的word插件，让工作更高效：不坑盒子 2023版
不坑盒子简介 很多朋友在工作过程中需要对Word文档进行编辑处理,如果想让Word排版更有效率可以试试小编带来的这款不坑盒子软件,这是一个非常好用的插件工具,专门应用在Word文档中,支持Office ...
- 车联网安全WEB靶场实测
序言 车联网跟WEB安全相关联的地方不多,车联网更多还是基于IOT安全.但是车联网安全也和WEB安全有密切相关的地方,比如云安全.API安全等.近两年的智能网联汽车从IVI(车载信息娱乐系统).OTA ...
- Could not execute query ---＞ MySql.Data.MySqlClient.MySqlException: You have an error in your SQL sy
1.出现问题 执行sql查询时出现如题错误,原因是安装mysql-connector-net的版本过高,当前项目在用的mysql版本不符合:关于当前安装的mysql-connector-net版本的查 ...
- SRE：如何提高报警有效性？
为什么要提升<报警有效性> 过多的报警会让负责人麻木 过多的报警会增加短信和电话的成本 提升根因定位效率 如何定义<报警有效性> 不漏报 不误报 不重报 不延报 如何量化 MT ...
- 安装KaLi操作系统并优化
安装KaLi操作系统并优化 1. 开启ROOT登录 安装操作系统跳过,下面直接做系统优化,方便以后使用! 有两种方法,可以实现开机以root身份登录kali系统. 第一种方法如下: 在终端下输入所需命 ...
- JZOJ 1077. 【GDKOI2006】防御力量
\(\text{Solution}\) 首先这个题目描述得不清不楚 反正做法是过 \(A\) 城引一条直线,算出直线两侧点数的 \(min\) 找到最优直线,即 \(min\) 最小的 那么重点在判断 ...
- 题解 P4163 [SCOI2007]排列
强烈谴责只有 125MB 的行为,然后我没删调试是个什么 SB... 闲话少说,切入正题-- 首先看到取余和数字是可以排列的,我们自然而然的想到了数位 dp,但是很显然这题不是的数位 dp 通常解决的 ...