css浮动

最新推荐文章于 2023-03-25 16:12:57 发布
最新推荐文章于 2023-03-25 16:12:57 发布
阅读量173 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/P_Jade/article/details/115699601
版权

深入理解css浮动

一、浮动介绍

历史：浮动最早的效果是为了实现文字环绕图片

文字和图片放在一起时，文字与图片的下方对齐，想要实现文字环绕图片（文字与图片的上方对齐），使用float，例如：


给照片加了float:left后的效果：

Note：
1.浮动，根据字面意思，就是浮起来了，想象一下，浮动的元素漂浮在了其他元素的上方，可添加margin ，占到外面容器的宽的时候，会换到下一行（站队的边界是父级的边界）
2.浮动元素脱离正常流，意思是布局时后面元素当它不存在（只有块级元素看不到它们，文本类属性的元素还是当它存在的，环绕其身边），但仍然在dom树上。
3.如果是在js中通过element.style设置元素浮动，需要用cssFloat,因为float是js中的一个关键字。【IE8及以下浏览器用styleFloat】

如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #father {
            border: 1px solid red;
        }

        #test {
            background-color: green;
            /* float: left; */
        }
        .brother{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>
    <div id="father">
        <span id="test">span内容</span>
    </div>
    <div class="brother"></div>
    <script type="text/javascript">
        var oSpan=document.getElementById("test");
        oSpan.style["cssFloat" in oSpan.style? "cssFloat" : "styleFloat"]="left";
    </script>
</body>

</html>

没加浮动的效果：
在这里插入图片描述
加了浮动的效果：

在这里插入图片描述

二、包裹性

包裹性指的是元素尺寸刚好容纳内容。

具有包裹性的其他属性：

  • display:inline-block/table-cell/…
  • position:absolute/fixed/sticky
  • overflow:hidden/scroll
通过例子看看浮动的包裹性
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            border: 1px solid green;
            padding: 30px;
            background-color: green;
            /*将背景裁剪到内容框，方便看浮动元素效果*/
            background-clip: content-box; 
        }

        .fl {
            float: left;
        }
    </style>
</head>

<body>
    <div class="container fl">
        内容
    </div>
</body>

</html>

在这里插入图片描述

包裹性原理

浮动之所以会产生包裹性这样的效果是因为float属性会改变元素display属性最终的计算值。

设置float前的display属性 >> 设置浮动后的display属性计算值

  • inline >> block
  • inline-block >> block
  • inline-table >> table
  • table-row >> block
  • table-row-group >> block
  • table-column >> block
  • table-column-group >> block
  • table-caption >> block
  • table-header-group >> block
  • table-footer-group >> blcok
  • flex >> flex
  • inline-flex >> inline-flex【inline-flex在chrome下测试，float后display:flex】
  • other >> unchanged
可以利用浮动的包裹性来达到父容器自适应内部元素宽度

三、破坏性

通过第一个例子可以看出元素浮动后，导致父元素不能包住浮动元素，高度塌陷了。

其他破坏性的属性：

  • display:none
  • position:absolute/fixed/sticky

原理：因为浮动元素脱离了文档流，父元素仍然处在文档流中，所以父元素不能被浮动元素撑大。

四、清除浮动

clear属性

clear属性规定元素的哪一侧不允许有其他浮动元素。

取值：

  • left:元素左侧不允许有浮动元素
  • right:元素右侧不允许有浮动元素
  • both:元素左右两侧均不允许有浮动元素
  • none:默认值，允许浮动元素出现在两侧

清除浮动的三个方法：

1.兄弟元素设置clear:both

2.用父级的伪元素消除浮动流

3.将父级元素（是块级元素）变成BFC元素

方法一：兄弟元素设置clear:both
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #father {
            border: 1px solid red;
        }

        #test {
            background-color: green;
            float: left;
        }
        .brother{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>
    <div id="father">
        <span id="test">span内容</span>
    </div>
    <div class="brother" style="clear: both;"></div>
</body>

</html>

效果前：


效果后：
在这里插入图片描述

可以看到，在兄弟元素上加了clear:both后，兄弟元素让开了浮动元素的位置，但父元素还是没有包住浮动元素，这种方法不好用，pass掉。

方法二：用父级的伪元素消除浮动流
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #father {
            border: 1px solid red;
        }

        #test {
            background-color: green;
            float: left;
        }
        .brother{
            width: 100px;
            height: 100px;
            background: blue;
        }
        #father::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div id="father">
        <span id="test">span内容</span>
    </div>
    <div class="brother"></div>
</body>

</html>

效果后：
在这里插入图片描述

nice!，实现了父元素包住浮动元素了，兄弟元素也让了位置，好用！！！，再看最后一种方法。

方法三：将父级元素（是块级元素）变成BFC元素
补充BFC知识

BFC:块级格式化上下文【在css3中叫Flow Root】是一个独立布局环境，相邻盒子margin垂直方向会重叠。

什么样的元素会为其内容生成一个BFC呢？

  • 浮动元素，即float:left|right
  • 绝对定位元素，即position:absolute|fixed
  • 块容器，(比如inline-blocks，table-cells和table-captions)，这些块容器有个特征就是它们不是块级盒子。即display:table-cell|table-caption|inline-block
  • 设置了除visible外的overflow值的块盒子，即overflow:hidden|scroll|auto

BFC特性：

  • 创建了BFC的元素中，子浮动元素也会参与高度计算
  • 与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素相互覆盖
  • 创建了BFC的元素不会与它们的子元素margin重叠

这里选用overflow:hidden清除浮动，其余的可以自己动手试试看。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #father {
            border: 1px solid red;
            overflow: hidden;
        }

        #test {
            background-color: green;
            float: left;
        }
        .brother{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>
    <div id="father">
        <span id="test">span内容</span>
    </div>
    <div class="brother"></div>
</body>

</html>

在这里插入图片描述

PS:

clear:both和BFC的区别：前者可以发生margin重叠，BFC不会有margin重叠

BFC的缺点：

1、不能应用于所有场合，因为不可能所有元素都绝对定位或者不可能所有元素都浮动。

2、现代浏览器不认识zoom：1。

五、总结

每种清除浮动的方法都有弊端，权衡后推荐用法：

.clearfix::after{
	content:"";
	display:block;
	height:0;
	overflow:hidden;
	clear:both;
}
/*IE6和IE7*/
.clearfix{
	*zoom:1;
}

或者：

.clearfix:after{
	content:"";
	display:table;
	clear:both;
}
/*IE6和IE7*/
.clearfix{
	*zoom:1;
}
注：.clearfix类只应该用在包含浮动元素的父元素上

六：浮动布局

1.普通固定布局

通常用的浮动布局一般是：固定尺寸+浮动。

例如:两行布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 700px;
        }

        .left {
            width: 150px;
            float: left;
        }

        .right {
            width: 450px;
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">
        <img
            src="https://bkimg.cdn.bcebos.com/pic/730e0cf3d7ca7bcb3409f115bf096b63f624a89d?x-bce-process=image/resize,m_lfit,w_220,limit_1/format,f_auto" />
    </div>
    <div class="right">
        文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
    </div>
</body>

</html>

在这里插入图片描述

问题：

容错性差：容器尺寸变了，就得改代码。

复用性不好：尺寸固定，模块在另外尺寸容器中不能重用。

2.推荐布局

(1)左侧尺寸固定右侧自适应的流体布局

在上面代码基础上修改样式为

<style type="text/css">
		.left{
    		width: 150px; 
      		float: left; 
  		}
  		/*流体布局*/
		.right { 
            margin-left: 150px;
    	}
  </style>

重点是使用margin-left，且不要定宽。这样好处是容器尺寸变化右侧可自适应。
在这里插入图片描述

(2)右侧尺寸固定左侧自适应的流体布局

改变DOM位置的流体布局写法

写代码时顺序为先右后左，这样就可以设置右栏右浮动，左栏设置margin-right

<style type="text/css">
	.right{
		float: right;
		width: 150px;
	}
	.left{
		margin-right: 150px;
	}
  </style>
</head>
<body>
<div  class="right">
<img  src="img/wb.jpg">
</div>
<div class="left">
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
</div>
</body>

在这里插入图片描述

不改变DOM位置的流体布局写法【左右栏都左浮动】

写代码时顺序不变，左右栏都浮动，通过margin调整位置。

<style type="text/css">
.wrap {
  width: 100%;
  float: left;
}
.left {
  margin-right: 150px;
}
.right {
  width: 150px;
  float: left;
  margin-left: -150px;
}
  </style>
<body>
<div class="wrap">
    <div class="left">
    文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
    </div>
</div>
<div  class="right">
    <img  src="img/wb.jpg">
</div>
</body>

效果同上。

(3)两栏都自适应的布局

原理是左栏浮动，右栏生成BFC，根据BFC特性与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素相互覆盖。

<style type="text/css">
.left {
  float: left;
}
.right{
   display: table-cell;
 }
  </style>
<body>
 <div class="left">
    <img src="img/wb.jpg"/>
  </div>
  <div class="right">
    文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
  </div>
</body>

在这里插入图片描述

七、float布局和inline-block布局对比

浮动和inline-block都能让元素排成一排，那么两者之间怎么区分呢？下面对比一下。

  • 文档流：浮动元素脱离正常流，让文字环绕。inline-block仍然在正常流中。
  • 水平位置：不能通过给父元素设置text-align:center让浮动元素无法水平居中【因为脱离文档流】，而inline-block可以。
  • 垂直对齐：浮动元素紧贴顶部，inline-block默认基线对齐，可通过vertical-align调整。
  • 空白：浮动忽略空白元素彼此紧靠，inline-block保留空白。

举例：浮动布局可以去掉元素之间的空格，而inline-block会保留空格

<style>
button {
    margin: 0;
    float: left;
}
p {
    clear: both;
}
</style>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
</body>

在这里插入图片描述

button默认display:inline-block；可见他们之间有空格的距离。加了float:left后各个button元素之间空格消失。

总结：处理文字环绕自然是用浮动，处理图片列表垂直对齐或者横向导航可以选择inline-block。

MPJADEJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css+js框浮动效果
06-11
使用css+js实现简单的浮动位移动画
html中如何给图片设置浮动,css – 如何在div中浮动图像
weixin_39885412的博客
06-04 2585
我有这个HTML：Keith AndersonVP, Digital AdvisoryRetailNet GroupStore of the Future 它是由Drupal视图动态生成的,因此我根本无法更改输出html.我需要在这里工作.这是期望的结果：爆头没有任何造型,这就是它的样子：我试图设置图像样式以强制它浮动到文本的左侧：.view-...
css+js实现 不影响周边内容的浮动图片
jhycjhyc的专栏
03-06 1986
1.目标 在网页中，图片以缩小的尺寸显示 ，图片四周可环绕文字 ，当鼠标悬停于图片时，图片向右向下放大，覆盖周围的文字或其他内容，这个过程中，周围的文字或其他内容的位置不发生变化 ，鼠标离开图片，图片恢复为原尺寸，放大的恢复的过程是渐变的，不是瞬间完成的。 2.思路 图片的尺寸发生变化而周围的内容不发生变化，这就不能仅靠float来实现 ，应该用float实现 浮动时，如尺寸发生变化 ，周围
清除浮動，父類塌陷解決
ChengCheng170604的博客
04-26 95
1，clear清除浮動 加一個空div清浮動 壞處：破壞了頁面結構，多餘的div 2，用css清除浮動等同于在div後面加個div #father:after{ content:''; display:block; clear:both; } 3.加一個overflow overflow:hide 4,用position 转载于:https://www.cnblo...
CSS浮动总结
bug 消灭师的博客
03-31 311
CSS浮动、清除浮动的5种方法
css 浮动
WJXYCWCXY的博客
03-25 916
float浮动，浮动的影响及解决方法，万能解决浮动问题
CSS 浮动
m0_52861684的博客
08-28 4988
CSS浮动。
CSS浮动
『愚』的博客
11-05 4960
CSS浮动浮动的特性float属性三个div都不浮动第一个div浮动第二个div浮动三个div都浮动浮动的父子关系浮动影响父层盒子高度overflow属性溢出处理清除浮动 浮动的特性 1.浮动主要用于使得div脱离标准文档流，生成多列布局 2.浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素） 3.浮动元素支持所有的css样式 、内容撑开宽高 、多个元素设置浮动，宽度足够的话，会排在一行 、脱离文档
css 浮动效果
wu118765783的博客
10-05 651
大家好，我是pkqk,废话不多说直接开始。 浮动float,常用浮动效果有left，right值，分别是左浮动与右浮动，意思是：一个浮动的元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 效果展示： 总结 float属性 1.不会无视流动元素（在文档流中的元素）和浮动元素 2.流动元素（在文档流中的元素）无视浮动元素 ...
浅谈CSS浮动的特性
09-24
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。这篇文章主要介绍了浅谈CSS浮动的特性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css浮动，左右浮动和去除浮动
11-12
浮动f
css 浮动 理解Float的含义
09-25
css实例教程 理解Float的含义.
CSS 关于浮动
09-25
浮动是 css 的定位属性。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。
理解CSS浮动float、定位position
09-27
本文针对CSS浮动float、定位position进行学习理解，通过实例帮助大家掌握CSS浮动float、定位position技巧，感兴趣的小伙伴们可以参考一下
CSS 浮动元素
jcf52的博客
04-21 812
在 CSS 中，任何元素都可以浮动。 浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 三种取值 left：向左浮动 right：向右浮动 none：默认值，不浮动 一.clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素 right...
浅谈CSS浮动的那点事儿
09-24
下面小编就为大家带来一篇浅谈CSS浮动的那点事儿。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css浮动 float属性详解
11-21
一、什么是浮动？ 浮动，顾名思义，就是漂浮的意思。指的是一个元素脱离文档流，悬浮在父元素之上的现象。 二、如何产生浮动？ 给元素本身添加float属性 float值： left 元素向左浮动。 right 元素向右...
CSS浮动练习
08-21
浮动练习
css 浮动父级塌陷
最新发布
10-13
CSS浮动会导致父级元素高度塌陷的问题，解决方法有多种，其中一种是使用clearfix清除浮动。 clearfix是一种清除浮动的技术，可以通过在父级元素上添加一个clearfix类来实现。具体实现方式如下： ``` .clearfix::after { content: ""; display: table; clear: both; } ``` 这样就可以解决浮动父级塌陷的问题了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值