float一点小疑问 浮动也会有层级？

最新推荐文章于 2020-12-22 19:18:16 发布
最新推荐文章于 2020-12-22 19:18:16 发布
阅读量3.5k 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanhu2/article/details/18799979
版权 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,div,a{
margin:0;padding:0;
}
/* 清理浮动 */
.fn-clear:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.fn-clear {
    zoom:1; /* for IE6 IE7 */
}
.m{
	width:780px;
	padding-left:400px;
	margin:0 auto;
}
.l{
	float:left;
	background:#ccc;
	width:400px;
	height:400px;
	margin-left:-400px;
}
.r{
	width:780px;
	background:red;
}
.r .d{
	width:1080px;
	margin-left:-300px;
}
.r .d a{
	float:left;
	width:100px; height:100px;
	margin:10px 0 0 10px;
	background:green;
}
</style>
</head>
<body>
	<div class="m">
		<div class="l">
		</div>
		<div class="r">
			<div class="d fn-clear">
				<a href=""></a>
				<a href=""></a>
				<a href=""></a>
				<a href=""></a>
				<a href=""></a>
				<a href=""></a>
				<a href=""></a>
			</div>
		</div>
	</div>
</body>
</html>

ie&ie9&chrome

FF



ie7



从现象看出ie7 class为r的部分没有继承父框的高度，其他浏览器都继承了。

ie8&ie9&chrome浮动元素会排同一浮动层级的元素旁边。

FF的浮动元素则根据层级来显示。

这里的浮动层级是我创造的名词。大概的意思是父元素浮动子元素浮动层级+1；

就是如果父元素没浮动，子元素浮动的话，也只能浮动在父元素同级浮动元素的旁边。

FF则是子元素可以浮动到父元素同级的浮动元素上层。   这真神奇。


不知道还有没有其他解释。希望有人能看到这篇文章。

copy工程师
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
层级
qq_40052011的博客
11-28 184
一个元素分两层，下半层是盒模型相关，上半层是文字相关。 1.浮动提升层级，半层（可设置文本环绕图片） 脱离文档流，但是有半层占据文档流位置 <div id="d1"> d1 </div> <div id="d2"> d2 </div> <div id="d3"> </div> ...
CSS Float(浮动)
auto_center的博客
06-26 441
CSS Float(浮动) 1、什么是 CSS Float（浮动）？   CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。 2、元素怎样浮动   元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素
CSS布局(1)---浮动布局之float用法
zhuang1619的博客
12-20 642
本文是对https://www.cnblogs.com/zcy_soft/archive/2011/02/12/1952513.html 的一些总结思考。 准备知识HTML中的元素分为块级(block)元素和内联(inline)元素。 1.块级(block)元素 总是独占一行，且其后的元素也必须是独占一行 宽度(width),高度(height),内边距(padding)和外边距(margi
元素float，relative，absolute，fixed之后层级的高低浅析
峰会路转的博客
07-30 3485
主要记录的是谁覆盖谁的问题。测试环境chrome浏览器 元素float——一个元素浮动，另一个元素不浮动 <div class="pareant"> <div class="son son1"> son <span>span</span> </div> <div c...
css：float浮动
aimagirl的博客
06-05 648
今天就来深入分析一下浮动，以及各种清除浮动的方法（下一篇介绍）！ 1.引出浮动 总所周知，在ie6,7以下版本如果我们想让块级元素显示为行内块级元素，使用display：inline-block是无效的（坑爹的ie6,7，总是坑爹！）所以解决办法就是使用浮动（float），那么我们接下来就来细说一下浮动 2.浮动的特点 1） 使块元素可以在行内显示 2）使内联元素支持宽高 3）在我...
float-action-button:小程序版 float action button
05-18
在描述中提到的实现效果是：在小程序的首页上设置一个浮动按钮，当用户点击这个按钮时，会有三个隐藏的按钮浮现出来，用户再次点击这些按钮可以进行不同的操作，比如跳转到特定的页面（demo）。 JavaScript作为主要...
JS简单实现浮动窗口效果示例
10-21
浮动窗口通常用于网站上的广告或者在线客服功能，它会始终出现在浏览器窗口的某个固定位置，即使用户滚动页面，窗口仍然保持可见。 首先，我们来看HTML部分。在给出的代码中，可以看到两个注释掉的`div`元素，它们...
Andriod浮动飘动效果
09-27
在Android开发中，"浮动飘动效果"通常指的是在屏幕上创建一种动态的视觉效果，让元素仿佛在屏幕上漂浮并移动。这种效果可以用于各种场景，比如应用通知、消息提示或者用户界面的交互元素，为用户提供更为生动和有趣...
android 悬浮移动小图标 应用内的
08-03
在Android开发中，"android 悬浮移动小图标 应用内的"这一技术通常指的是实现一个浮动窗口（Floating View）或者叫悬浮按钮（Floating Action Button, FAB），它能够在应用程序内部自由移动，并且不会与界面中的其他...
javascript html js自定义多级联动浮动菜单,js制作菜单
05-24
浮动效果可以通过`float`属性实现，而隐藏/显示子菜单则通常通过`display`属性来控制。例如： ```css .menu ul { display: none; } .menu li:hover > ul { display: block; } ``` 最后，JavaScript（JavaScript...
css2.1
猪窝
10-12 269
定位 1、定位参照于初始包含块来定位 2、初始包含块是一个视窗大小的矩形，但不等于视窗 3、left、top、right、bottom、width、height的默认值为auto 4、margin、padding的默认值为0 5、border-width的默认值为中等大小 6、margin、padding的百分值参照的是包含块的width,不是包含块的margin、paddin...
5.深入浮动原理&布局&7种清浮动
无足舞者
02-02 2090
浮动原理 浮动VS “inline-block” 1. 对比 浮动 inline-block 使块元素在同一行显示 使块元素在同一行显示 使内嵌元素支持宽高 使内嵌元素支持宽高 没设置宽度时，默认内容撑开 没设置宽度时，默认内容撑开 代码空格、换行不被解析
css2.1页面布局
weixin_44708911的博客
10-24 282
css(2.1): 包含块： 较早前讨论浮动元素的包含块：对于浮动元素，其包含块定义为最近的块级祖先元素，对于定位，情况就会发生变化： 根元素的包含块（也称为初始包含块）是有用户代理创建的，也就是html元素，不过浏览器会使用body作为根元素，在大多数浏览器中，初始包含块是一个视图窗的矩形； 对于一个非根元素，如果其position的值为relative或static，包含块由最近的块级框，表单元或行内块祖先框，内容边界共同决定的； 对于一个非根元素，如果position属性是...
浮动、定位和层级
qq_33562825的博客
01-26 4659
浮动的概念浮动的代码float:left;//左浮动 float:right;//右浮动浮动的特点 浮动的元素会脱离标准流（标准流就是浏览器默认摆放盒子的标准） 浮动后的元素会覆盖在标准流之上 浮动后的元素会改变显示方式（会变成行内块），可以设置宽高 浮动对页面的影响 如果父盒子中有一个子盒子，父盒子没有设置高度，子盒子浮动，那么父盒子不能被子盒子撑开，即父盒子高度为0，这时下面的盒子会占位。
CSS层级(浮动，定位的层级提升)
hao_sir
03-16 2579
总结： 　　浮动提升半层，只有在浮动的时候 才需要考虑元素分两层 　　定位元素提升一层 　　相对定位会有残留 参考博客：https://blog.csdn.net/houyanhua1/article/details/79558136?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distri...
css absolute 和 float display block 的层级问题
Aimee的博客
11-20 1458
绝对定位 和 float 的层级在写代码的无意中，对有相同的父元素的不同的两个元素同时使用了position absolute 和float 定位，造成了层级混乱。
理解元素的浮动float分为背景与内容,属于“半层”飘出。
qq_43390061的博客
02-28 755
今天和朋友讨论了一下float，因为这是一个对初级或者小白前端程序员挺重要的内容，所以今天就来说说float浮动时容易出现的一个小“bug”。 一般来说，两个div会独占一行，一行在上一行在下，当我们给上面的div加浮动时会发现下面的div会“钻到上面div”的下面，这很容易理解。如下图，一个简单的demo。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head...
浮动 “半层理论”
langhuage的博客
12-22 137
半层理论！！！！！
float: left
最新发布
08-23
float: left 是一个 CSS 属性，用于指定元素在容器内的布局方式。当一个元素设置了 float: left 后，它会尽可能向左边靠拢，其他元素会围绕它进行布局。 这个属性常用于创建多列布局或实现图文混排效果。通过设置多个元素的 float: left，可以让它们在同一行内水平排列。如果容器宽度不足以容纳所有元素，那么超出容器宽度的元素会自动换行。 需要注意的是，设置了 float 属性的元素会脱离正常的文档流。这意味着其他没有设置 float 属性的元素会忽略它，而且父元素的高度也不会自动适应其高度。为了避免这个问题，通常需要在父元素上设置 clear 或 clearfix 属性。 另外，float 属性会使得元素变为块级元素，并且浮动的元素具有层叠性质，可以通过 z-index 属性进行调整显示层级。 希望这个回答对你有帮助！如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值