关于浮动与清除浮动,你应该知道的

我在做页面布局的时候,多多少少总会受到来自浮动的困扰,因此专门通过实践来总结一下浮动与清除浮动。

首先总结几个基础的概念:

浮动:设置浮动的元素会脱离文档流,不会影响块元素的布局,但是会影响内联元素的排列[通常是文本];

文档流:在文档流中,块元素会单个元素独占一行

接下来我们通过实际演示来看看关于浮动的那些事儿。

下面是5个div块元素在文档流中一次排列

我们知道浮动元素有几个规律

  1. 如果浮动元素的上一个元素也是浮动,那么该元素会与上一个元素排列在同一行,如果行宽不够,后面的元素会被挤到下一行
  2. 如果浮动元素的上一个元素不是浮动,那么该元素仍然处于上一个元素的下方,根据浮动设定在左或者在右,而其本身也脱离文档流。后边的元素会自动往上移动到上一个文档流块元素下方为止

根据上面的规则,我们做一些改动来验证一下

给2添加左浮动,给3添加右浮动

首先1没有浮动,所以2在1的下一行,而3的上一个元素2是有浮动的,所以3和2在同一行,2和3因为有了浮动,所以脱离了文档流,他们后面的元素4就自动往上移动,处于1的下方

给元素2添加左浮动

因为它的上一个元素1没有浮动,所以排列在1的下方,不和1同一行。而元素2同时脱离了普通流,因此后边的元素会顶替上来

因此,浮动元素的位置是根据他的上一个元素来确定的[以及浮动位置来确定]

清除浮动

可能浮动会比较好理解一点,而不少人会对清除浮动有一些误解。

  • 清除浮动并不是说让浮动元素回到文档流
  • 清除浮动只会改变改元素自身的位置,并且只针对排在该元素前面的元素。目的是让自己的左边或者右边没有浮动元素

例子1

给2添加左浮动,给3添加右浮动,之后给3添加清除左边的浮动。

因为2是3的上一个元素,所以给3清除浮动,只有2才能影响他的位置,而2在3的左边,因此只有给3添加清除左浮动才有效果,清除左边浮动的意思,就是让2不在3的左边,所以3会改变自己的位置,移动到2的下一行,但是右浮动的效果任然在,所以在下一行的右侧

再给5添加删除右浮动效果,因为5的右边有一个浮动元素是3,而3是5前面的元素,因此5会改变位置,让自己左右没有浮动元素

例子2

给1,2,3,4添加左浮动

然后给3添加清除左浮动的效果。如果直接给3清除右浮动,将没有任何变化,因为3右边的浮动效果是4,而4处于3的后边,不会影响3的位置

关于高度坍塌

当没有指定高度的父元素中的子元素全部都浮动时,父元素中内部高度因为是普通流中的块元素撑起来的,所以这个时候父元素的高度会变成0.或者会有部分浮动元素的位置会超出父元素的高度之外。这种现象,叫做高度坍塌。

如下图,给元素设置左浮动。设置了边框的父元素因为没有高度所以上下边框重合,看上去就像一条线

解决方法:使用:after伪元素

<!-- 浮动 清除浮动 高度坍塌 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度坍塌</title>
    <style>
        .div1 {
            border: 1px solid #ccc;
        }
        .div1:after {
             content: ‘.‘;
             display: block;
             height: 0;
             visibility: hidden;
             clear: both;
         }
        .div2 {
            width: 100px;
            height: 100px;
            margin: 5px;
            background-color: orange;
            float: left;
        }
    </style>
    <!--[if IE]>
    <style>
        .div1 {
            zoom:1;/*触发hasLayout*/
            display:block;
        }
    </style>
    <![end]-->
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

after的原理是在div1的子元素最末尾添加一个元素,如果该元素能够位于div2的后面,并且没有浮动,那么父元素div1的高度就会重新获取。因此使用了上方的解决方案

因此,闭合浮动之后,一切恢复正常

这就是通过在子元素末尾添加伪元素来解决高度坍塌问题的解决方案。

原文地址:https://www.cnblogs.com/10manongit/p/12630285.html

时间: 2024-10-25 21:13:48

关于浮动与清除浮动,你应该知道的的相关文章

css浮动和清除浮动

浮动存在的原因 在word排版中,文本可以环绕图片.在css中,想要实现文字环绕的效果,只能借助于float,没有其他的替代方式.在实际中,文档的布局经常会使用浮动. float属性 float属性,默认为none,也就是标准流通常的情况.如果将float的属性的值设置为left或right,元素就会向其父元素的左侧或右侧紧靠. inherit表示从父元素继承float属性的值. clear属性 clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为

CSS浮动与清除浮动(overflow)例子

在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧. float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神奇,于是乎就去问了师匠: Normal flow is the way that elements are displayed in a web page in most circumstances. All elements in HTML are inside boxes which are e

CSS中的浮动和清除浮动,梳理一下!

CSS中的浮动和清除浮动,梳理一下! 第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧. 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline

【转】CSS中的浮动和清除浮动

以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场景.

关于浮动与清除浮动

页面布局方式,主要包含:文档流.浮动层.float属性. ?html页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. ?浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框.而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素.内联元素:有空隙就插入. ?float属性包括left(元素向左浮动).right(元素向右浮动).

css中元素的浮动和清除浮动的影响

用float属性可以使元素浮动到包含框内的左右边使文本围绕它,这里创建一个包含框内有段落和一个小的div并被包围: <html> <head> <title><title> <style type="text/css"> div{ border:1px solid red; width:200px; height:200px; } .div1{ background-color:yellow; float:right; wid

css 的定位,浮动和清除浮动——浅析

在下才疏学浅,不足之处,还请多多指教. 定位有这五种: 常用的是前三种,接下来上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ padding: 100px 100px; position: relative; width: 35

标准文档流.浮动以及清除浮动(学习笔记)

标准文档流 1.当后面空间不够时,会空白折叠,自动换行. 2.当高矮不齐时,会底部对齐. 3.自动换行. 标签根据显示的内容划分成:文本级,容器级. 按照文档流划分:块级元素.行内元素; 块级元素: (1).霸占一行,不能与其他任何元素并列. (2)能接受宽高. (3).如果不设置宽度,那么宽度将默认变为父亲的100%. 行内元素: (1).与其他行内元素并排; (2)不能设置宽高.默认宽度就是文字宽度. 所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素. 所有的容器级标签

css浮动及清除浮动

1. 浮动 1. 特点: 1.不占原来的位置(脱标) 2.可以让块级元素在一行上显示 3.浮动可以把行内元素转化为行内块元素 2 清除浮动 清除浮动指的是清除浮动的影响 注意: 当子元素设置了浮动,父元素没有高度的时候,造成页面布局混乱.这种情况下进行清除浮动. 3  清除浮动的几种方式 1.使用clear:left|  right  | both Clear:both; 这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,空标签可以是div标签,也可以是P标签等,并