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是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...
随机推荐
- Vue28 Web Storage
https://www.jianshu.com/p/513f6949fc25 1 简介 Web Storage 包括 localStorage 和 sessionStorage ,是浏览器本地数据存储 ...
- 线程基础知识09-JAVA的可见性和有序性问题
1 CPU中的三级缓存及可见性问题 1.1 简介 1.2 缓存行Cacheline 1.3 可见性问题-缓存一致性协议 2 JAVA中的有序性问题 2.1 指令重排简介 2.2 as-if-seria ...
- ES6的Set详解
数组去重 let arr = [ 1,2,3,4,5,3,2 ] // 数组去重 // 方法一 let newArr = [new Set(arr)] console.log(newArr); // ...
- Windows下小狼毫配置五笔拼音方案
Windows下小狼毫配置五笔拼音方案 目录 Windows下小狼毫配置五笔拼音方案 1 下载并安装小狼毫rime 2 配置五笔.五笔拼音方案 3 安装设置五笔拼音混合输入 4 设置输入方案 1 下载 ...
- Vulhub 漏洞学习之：Redis
Vulhub 漏洞学习之:Redis 1 Redis简介 Redis 是完全开源的,遵守 BSD 协议,是一个高性能的 key-value 数据库.Redis 与其他 key - value 缓存产品 ...
- 病程极短(≤16周)的495例未分化关节炎患者随访2年的结局[EULAR2015_SAT0055]
病程极短(≤16周)的495例未分化关节炎患者随访2年的结局 SAT0055 TWO-YEAR OUTCOME IN 495 PATIENTS WITH UNDIFFERENTIATED ARTH ...
- 实现 JSON 高亮
JSON 转换 HTML function formatJson(json) { let regexp = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"]) ...
- ubuntu 启动脚本变化
ubuntu-16.10 开始不再使用initd管理系统,改用systemd- 快速看了 systemd 的使用方法,发现改动有点大, 包括用 systemctl 命令来替换了 service 和 c ...
- Electron 应用图标修改
1,首先给窗口添加图标: 1) 窗口图标是图片jpg或者png格式,如果没有图标去[https://www.aigei.com/icon/?wd=icon%E7%BD%91&bd_vid=10 ...
- 01-搭建小巧完善的Kubernetes环境
安装Docker Docker安装和基础命令 安装Minikube minkkube start 安装minikube curl -LO https://storage.googleapis.com/ ...