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是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...
随机推荐
- 如何查看库函数实现的某些函数(strlen,strcmp,strcpy等)
我们拿strlen()作为举例(编译环境为:VS2022) strlen()引用的头文件为 string.h,如下进行操作 ps:打开strlen.c文件 便可以看到库函数对于strlen()的实现, ...
- Kinsoku jikou desu新浪股票接口变动
1.问题原因 新浪股票接口返回如标题所示值:Kinsoku jikou desu! http://hq.sinajs.cn/list=code 新浪股票的接口变动,需要在请求头中添加Referer值. ...
- 【源码】RapidJSON 源码剖析(0.1)：调试工具 GDB 的使用
[源码]RapidJSON 源码剖析(0.1):调试工具 GDB 的使用 正式开始源码阅读之前,有必要了解一下源码阅读中用到的调试工具 GDB. GDB(GNU Debugger) 是一种可以运行在多 ...
- JZOJ 4043. 【雅礼集训2015Kzf】洪水
题目 题解 很明显的 \(dp\) \(f_u = \min(a_u, \sum_{(u,v) \in E}f_v)\) 然后套路的设 \(g_u\) 表示不管重儿子的 \(f_u\) \(f_u = ...
- Android 分区和内存监控
Android 分区和内存监控 Andorid之所以是分区,是因为各自有对应的功能和用途的考量,可以进行单独读写和格式化. Android 设备包含两类分区: 一类是启动分区,对启动过程至关重要. 一 ...
- TNF诱导的关节破坏由IL-1介导
TNF诱导的关节破坏由IL-1介导Zwerina J, et al. PNAS.2007;104:11742-7.TNF拮抗剂有效抑制人类类风湿关节炎(RA)的炎症和结构破坏.然而截至目前还不清楚TN ...
- Canvas：绘制曲线
前言 画曲线要用到二次贝塞尔曲线或三次贝塞尔曲线.贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如 PhotoShop. 二次贝塞尔曲线 二次贝塞尔曲线在 ...
- Vue学习笔记之Vue基础语法
1. 概述 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 H ...
- 看完这一篇，ShardingSphere-jdbc 实战再也不怕了
谈到分库分表中间件时,我们自然而然的会想到 ShardingSphere-JDBC . 这篇文章,我们聊聊 ShardingSphere-JDBC 相关知识点,并实战演示一番. 1 ShardingS ...
- Docker工作管理中实用操作
"build once ,run anywhere" ...