一、float(浮动)是什么
float
属性定义元素在哪个方向浮动。
float:left
元素向左浮动。
float:right
元素向右浮动。
float:none
默认值。元素不浮动,并会显示在其在文本中出现的位置。
float:inherit
规定应该从父元素继承 float 属性的值。
看一段简单的代码:
<div class="child1">左浮动</div> <div class="child2">右浮动</div> <div class="child3">喵</div> .child1 { float: left; height: 500px; width: 70%; background: #aa0;//黄 } .child2 { float: right; height: 300px; width: 30%; background: #0aa;//青 } .child3 { background: #a0a;//紫 }
二、clear是什么
clear
属性指定段落的左侧或右侧不允许浮动的元素。
clear:left
在左侧不允许浮动元素。
clear:right
在右侧不允许浮动元素。
clear:both
在左右两侧均不允许浮动元素。
clear:none
默认值。允许浮动元素出现在两侧。
clear:inherit
规定应该从父元素继承 clear 属性的值。
比如上面的例子,我们为 child3
加上 clear: both;
,便可清除浮动。(child3的左右两侧都不允许浮动元素,自然而然不会再跟在俩浮动元素的屁股后面了~)
那么,只在一侧不允许浮动是怎样的呢?
本来是酱紫的:
<div class="child1">child1右浮动</div> <div class="child2">child2右浮动</div> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈... .child1 { float: right; background: #aa0;//黄 } .child2 { float: right; background: #0aa;//青 }
然后,为 child2
加上 clear: right;
,在child2的右侧不允许浮动元素,所以child2就飘到了下一行。
那么,为 child1
加上 clear: left;
的时候,为什么不起效果呢?在这留个小彩蛋,欢迎大家留言讨论~
三、浮动带来的影响
浮动带来的最大影响就是,当父元素只包含浮动的子元素的时候,父元素的高度就会塌陷( height
变为 0
)。
像酱紫:(parent高度为0,无法显示粉色背景)
<div class="parent"> <div class="child1">child1右浮动</div> <div class="child2">child2右浮动</div> </div> .parent { background: #FBC;//粉 }
四、清除浮动的方式
-
在父元素中的结尾加一个空
div
div
<div class="parent"> <div class="child1">child1右浮动</div> <div class="child2">child2右浮动</div> <div style="clear: both;"></div> </div> .child1 { float: right; background: #aa0; } .child2 { float: right; background: #0aa; }
可见,空
div
高度为0,位于父盒子的最下面,使父盒子重新撑起了应有的高度。为什么要在最后加?倘若你在中间加,效果会是酱紫:
由于空
div
的左右都不允许浮动元素,那么它就会另起一段,导致盒子位置的效果就像child2
清除右侧浮动一样,child2
跑到了child1
下方。 -
在父元素设置
overflow
属性- 原理:设置
overflow:hidden
或overflow:auto
,浏览器会自动检查浮动区域高度(才能知道父框的内容有无溢出) - 优点:浏览器支持好
- 缺点:子元素若超出父元素尺寸会被隐藏,或者父元素出现滚动条
<div class="parent" style="overflow:hidden;"> <div class="child1">child1右浮动</div> <div class="child2" style="position:relative;top:10px;">child2右浮动</div> </div>
当设置
overflow:auto;
时,父元素会出现滚动条: - 原理:设置
-
伪元素
- 原理:类似设置clear属性
- 优点:浏览器支持好,普遍
<div class="parent clearfix"> <div class="child1">child1右浮动</div> <div class="child2">child2右浮动</div> </div> .clearfix{ zoom: 1; //zoom(IE专有属性)可解决ie6,ie7浮动问题 display: block; } .clearfix:after { content: "."; //content: "";也可 visibility: hidden; display: block; height: 0; clear: both; }
完~若有不足,请多指教,不胜感激!欢迎路过的大侠讨论~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 故事:走进 JVM 的世界(图文并茂)
- 快速入门 Docker 实战教程 | 图文并茂
- 图文并茂,为你揭开“单点登录“的神秘面纱
- 图文并茂剖析 Netty 编解码以及背后的设计理念
- 图文并茂的带你彻底理解悲观锁与乐观锁
- 【图文并茂,点赞收藏哦!】重学巩固你的Vuejs知识体系
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。