元素脱离普通文档流后特点及问题总结

原创 2016年08月28日 14:59:47

在使用float,position:absolute | fixed属性之后元素会脱离普通文档流,与inline-block和position:relative不同,后两者还在普通文档流中。

对于行内元素来说,允许行内元素使用原本不能使用的width,height,margin-topmargin-bottompadding-toppadding-bottom属性。

元素脱离普通文档流后其他元素定位会将其视为不存在,尤其是对于没有设置高度且所有子元素脱离后的父元素,父元素高度将变为0

红色浮动前 红色浮动后,绿色div高度为0消失

*{margin: 0;padding: 0;}
.content{width: 100px;background: green;}
.float{width: 50px;height: 50px;background: red;}
.float{float: left;}
.test{width: 100px;height: 100px;background: yellow;}
<div class="content">
	<div class="float"></div>
</div>
<div class="test"></div>
怎么解决这种问题呢?

1.给外层content设置高度,但是这种方法很死板,并不好用

2.在content父元素中加入.content{overflow: hidden;}

3.在所有浮动元素后面加入<div style="clear: both;">

<div class="float"></div>
<div style="clear: both;"></div>
上面三种方法都可以让消失的父元素重新定位。
版权声明:本文为博主原创文章,未经博主允许不得转载。

关于css脱离标准文档流的两种方式

所谓脱离标准文档流就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。 第一种方式:浮动(float):不浮动的盒子会无视浮动的盒子,假使现有两个盒子,一个...

java set特点详解与set中元素比较问题

Java中Set集合是一个不包含重复元素的Collection,首先我们先看看遍历方法 [java] view plain copy package...

css中的外边距合并时垂直方向上的普通流相邻元素间

作者:丁小倪 链接:https://www.zhihu.com/question/19823139/answer/13610574 来源:知乎 著作权归作者所有,转载请联系作者获得授权。 ...
  • kbx8916
  • kbx8916
  • 2016年07月20日 22:36
  • 365

负边距在普通文档流中的作用和效果

转自:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 css中的负边距(negative ma...

一天搞定CSS:BFC布局与普通文档流布局比较--15

一天搞定CSS:BFC布局与普通文档流布局比较--15

CSS文档流与块级元素,css

  • 2009年08月12日 17:12
  • 106KB
  • 下载

块级元素 内联元素 文档流 CSS 布局 知识小总结

最近在做web 前端的开发。     研究了一下css ,也算是一知半解。把自己的体会理解误区整理起来。     ①第一点我们要对文档流概念理解:      这个概念实在太重要了.理解了它,一堆CSS...

static 函数的用途 Static 函数的特点 与普通函数 有什么区别?

1、静态全局变量(又称全局静态变量): (1)静态全局变量的定义:在全局变量前加一个static,使该变量只在这个源文件中可用。         (2)全局变量与全局静态变量的区别: ...

RTOS系统延时与普通软延时的特点与区别

我们知道,在RTOS中会提供若干延时函数的API。对于没有仔细了解过RTOS的同学而言,可能会产生这样疑惑:这些API与普通自写的延时函数相比究竟有何优势呢?为什么要额外提供这些API?在这篇文章中,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:元素脱离普通文档流后特点及问题总结
举报原因:
原因补充:

(最多只允许输入30个字)