脱离文档流和恢复文档流的方法
文章目录
- 一、文档流
- 1. 什么是文档流?
- 2. 什么是脱离文档流
- 二、怎么脱离文档流
- 1. float
- 2. position
- a. position:absolute
- b. position:fixed
- c. position:relative
- 三、怎么恢复文档流
- 1. 对于float 的元素,对父级元素可以使用overflow:hidden
- 2. clear:both
- 如何解决浮动布局导致的父元素高度塌陷问题?
一、文档流
1. 什么是文档流?
将窗体自上而下 分成一行一行,并在每行中按照从左到右依次排放元素,称为文档流(normal stream又称普通流)
在html 中,html元素都是盒模型,盒子模型占用一定的空间,依次排放在html 中,形成了文档流。
2. 什么是脱离文档流
元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。
脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
二、怎么脱离文档流
1. float
一个元素浮动时,其他内容会“环绕”该元素。(权威指南P289)
2. position
a. position:absolute
绝对定位,absolute脱离文档流后的元素,是相对于该元素的父类(及以上,如果直系父类元素不满足条件则继续向上查询)元素进行定位的,并且这个父类元素的position必须是非static定位的(static是默认定位方式)。
当父级元素的position全是static的时候,absolute是相对于html来进行定位的。
注意:绝对定位的窗口一般都要设置相对距离,当你同时设置top和bottom的时候,只有top会生效,同理,同时设置left和right的时候,只有left会生效。
b. position:fixed
固定定位,完全脱离文档流,相对于浏览器窗口进行定位。(相对于浏览器窗口就是相对于html)。
c. position:relative
相对定位,元素框偏移某个位置,元素保持未定位前的形状,他原本所占的空间保留
三、怎么恢复文档流
1. 对于float 的元素,对父级元素可以使用overflow:hidden
2. clear:both
- 对子元素使用clear
我对两个盒子都进行浮动,并且都设置了clear:both 结果如下:
<style>*{padding: 0;margin: 0;}.box{border: 5px solid yellowgreen;}.box1,.box2{width: 100px;height: 100px;background-color: darkcyan; border: 1px solid black;}.box1,.box2{float: left;clear:both}</style>
</head>
<body><div class="box"><div class="box1">1</div><div class="box2">2</div></div>
- 对父元素使用clear
<style>*{padding: 0;margin: 0;}.box{border: 5px solid yellowgreen;clear:both;}.box1,.box2{width: 100px;height: 100px;background-color: darkcyan; border: 1px solid black;}.box1,.box2{float: left;}</style>
- 上面的浮动,下面的清除时
上面的浮动时
可以恢复
<style>*{padding: 0;margin: 0;}.box{border: 5px solid yellowgreen;}.box1,.box2{width: 100px;height: 100px;background-color: darkcyan; border: 1px solid black;}.box1{float: left;}.box2{clear:both;}</style>
- 下面的浮动,上面的清除时
下面的浮动时:
不可以恢复
- 一边浮动一边清除,这样是不可以的
(看到这篇文章的小伙伴可以留言,目前我只记得这一种方法)
总结一下
如何解决浮动布局导致的父元素高度塌陷问题?
- 在浮动元素的后面再添加高度为0一个div,并且让他清除浮动 clear:both
- 给父元素设置overflow:hidden;
- 给父元素设置display:inline-block; (会包裹子元素)
- 给父元素设置一个伪类
.box:after{content: "";display: block;clear: both;}
或者下面这种:
.box:after{content: ".";display: block;clear: both;height: 0;//使父元素不会被.撑出来overflow: hidden; //使.隐藏}
脱离文档流和恢复文档流的方法相关推荐
- relative会脱离文档流吗_脱离文档流和恢复文档流的方法
@[toc] 1. 什么是文档流? 将窗体自上而下 分成一行一行,并在每行中按照从左到右依次排放元素,称为文档流(normal stream又称普通流) 在html 中,html元素都是盒模型,盒子模 ...
- Word文档误删怎样恢复?6种实用方法分享给你
如果您曾经因为没有保存微软Word文档而丢失了所有工作,那么您就会明白疼痛是多么明显. 幸运的是,自从在软盘上备份文件的黑暗时代以来,Word已经走过了漫长的道路.如今,如果您丢失了未保存的Word文 ...
- 视频流媒体播放器EasyPlayer.js如何实现在FLV直播流断流恢复后自动重连?
背景分析 EasyPlayer-Android播放器是一款可针对RTSP.RTMP.RTSP&RTMP协议进行过优化的流媒体播放器,其中我们引以为傲的两个技术优势就是起播速度快和播放延迟低.最 ...
- 电脑文档误删除怎么恢复,恢复误删除电脑文档的方法
很多时候,我们在操作电脑时,一个不小心可能就将重要的文档删除掉了,如果删除的时候提示删除到回收站,那倒还好,如果是格式化.永久删除,或者是剪切失败什么的,那回收站就没有文档了,这时候我们要怎么恢复误删 ...
- EasyRecovery16支持恢复文档表格图片音视频等各种不同的数据
误删重要文件这样的事想必大家都不陌生,有时粗心起来可能经常会出现这样的事情.现代人的生活和工作基本离不开电脑等多媒体设备,每天需要处理的文件量和数据量也是呈指数增长,所以一款能够实现误删数据修复的软件 ...
- excel自动恢复文档被关闭或者误删除
电脑被意外断电或其他情况导致的excel未被保存. 重启后excel会提示是否恢复未保存的文档.如果这时点击了关闭或者删除这些文件,可能会导致文档的一些更新部分丢失. 解决方法: 1.excel菜单栏 ...
- 复合文档格式(五) - 短流、短流容器流和短扇区分配表
一.概述 上一篇学习了主扇区分配表和扇区分配表:http://blog.csdn.net/lipinganq/article/details/76785471 在复合文档头中的第56 - 59的4个字 ...
- word文档损坏怎么恢复
不知道你工作中是否有过损坏重要文件的经历,你就能知道你有多沮丧.丢失了关键信息,浪费了无数辛苦的工作才有的成果.遇到这种事情真的很头疼,那么在处理word文档损坏的时候,要采取什么样的措施修复呢? 1 ...
- Word文档损坏如何恢复?
Word是一款专业的文字处理软件,被人们普遍应用于各个方面.我们可以用其来编辑.存储重要的信息,但是,如果没养成随时保存数据的喜欢,在遇到人为或断电等意外导致Word数据丢失损坏时,就会非常地头疼.那 ...
最新文章
- 上周热点回顾(10.27-11.2)
- MyBatis配置项--properties
- asp登录页面跳转到注册页面_Java 添加页面跳转按钮到PDF文档
- 为某人命名以重新连接到您的服务器
- 在jOOQ之上构建的RESTful JDBC HTTP服务器
- HDU 2376 Average distance
- PHP学习笔记02:自然数列求和
- 2018-2019-2 20175230 实验三《Java面向对象程序设计》实验报告
- 如何将python数据输入到excel中_如何使用python将大量数据导出到Excel中的小技巧之一...
- 欧美大脑计划存在的问题和忽视的一个重要元素,互联网大脑计划系列三
- 测试按键延迟软件,怎么测试键盘延迟-灵猫键盘DIY大师测试键盘响应速度的方法 - 河东软件园...
- 计算机演示题打不开,win10系统计算机文件打不开的修复教程
- Verilog中{}的应用
- OpenGL | 放置摄像机gluLookAt函数
- 实验六 使用T-SQL语句查询数据
- 建立完善的员工晋升机制_完善机制,打造晋升方案
- 在unity3d里怎样使物体消失
- JS 唤起QQ对话框
- 胖了,也是该减减肥了
- Notability for Mac(备注笔记软件)
热门文章
- freemark导出word,图片显示问题
- python三年a班的成绩_Python题集:2019春Python程序设计选修课习题笔记
- linux下下载openwrt源码,OpenWrt下载编译
- sklearn机器学习(六)逻辑回归实例乳腺癌检测
- mysql下载安装(简单)
- 2509-Druid监控功能的深入使用与配置-基于SpringBoot-完全使用 .properties配置文件
- css3实现小图标向下引导小箭头动态效果
- 自学Java一点都不难!
- java set集合基础使用及其特点
- visual studio编译报错“常量中有换行符”等字符串中的错误