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

原创 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>
上面三种方法都可以让消失的父元素重新定位。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

margin塌陷及处理

什么是margin塌陷,margin塌陷是指在使用margin布局时,特定情况下导致margin高度与代码中设计的高度不同。 如 1. .outside { width: 100px; heigh...

CSS 元素垂直居中的 6种方法

转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E...

NO.55 双机定量备份某共享文件夹(例:可用于备份VSS Database)

使用Windows的定时计划任务按一定周期执行此批处理即可@REM ######################################################### @REM N...

line-height与vertical-align使用时发现的问题

垂直居中是网页布局中经常要用的技巧,尤其是会涉及到line-height属性和veitical-align属性。我在使用的过程中发现了这样一个问题。 .a{width: 400px;height:...

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

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

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

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

CSS文档流与块级元素,css

  • 2009-08-12 17:12
  • 106KB
  • 下载

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

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

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

1、静态全局变量(又称全局静态变量): (1)静态全局变量的定义:在全局变量前加一个static,使该变量只在这个源文件中可用。         (2)全局变量与全局静态变量的区别: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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