css float(脱离正常流:向左/右浮动直到父元素/另一float, 不占空间)

最新推荐文章于 2023-11-07 16:47:17 发布
原创 最新推荐文章于 2023-11-07 16:47:17 发布 · 5.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了浮动框的概念及其在页面布局中的行为特点。浮动框能够向左或向右移动直到碰到包含框或其他浮动框的边界，并且不会影响文档流中其他元素的布局。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
css float left布局换行不正常问题的解决
09-22
float属性是一种非常有用的CSS布局方式，它允许元素向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止。使用float属性可以实现文字环绕图片的效果，或者是创建多列布局等。 然而，在浮动布局中...
IE7 float:right 右浮动时元素换行错位的bug解决方法
09-25
`float`属性允许元素脱离其正常文档流，向左或向右移动，直到其边缘碰到容器的边框或其他浮动元素。在这种情况下，其他非浮动元素会围绕这个浮动元素流动。然而，在某些情况下，如元素具有特定的`margin`值，尤其是...
CSS定位模型 - float的几要素
web前端入门基础进阶教程-htmlcssjs
07-31 206
要点 1.浮动盒子会脱离文文档流，不会在占用空间。 2.非浮动元素几乎当浮动盒子根本不存在一样该怎么布局怎么布局不会被影响 3.非浮动元素中的文本内容会记住浮动元素的大小，并在排布时避开它,为其留出响应的空间 4.清除浮动本质：浏览器在非浮动元素的上方添加足够大的外边距，从而将元素的上边沿垂直向下移动到浮动元素的下方。 使用浮动 浮动盒子会脱离文档流，不会再占用空间。 常规流中的其他块级盒子（非浮动元素）几乎当浮动盒子根本不存在一样该怎么布局怎么布局不会被影响。 但是非浮动元素中的文本内容会记住浮动元素的
float不占位置的解决方法
zeyu1021的专栏
05-07 6341
经常碰到里面所有元素都是float的，所以外面的框就撑不开，没有任何大小，今天找到一个解决方法，在父级框里面加一个clearfix的css属性，css如下： .clearfix:after { content: '\20'; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }
css 之 float
小白向前冲！
02-26 570
【1】设置了float 属性后的效果（1）浮动元素会从普通文档流中脱离，不会占据正常文档的位置，但浮动元素影响的不仅是自己，还会影响周围元素的对齐进行环绕；（2）不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height（3）浮动元素在浮动的时候，其margin不会超过包含块的padding，即浮动元素的浮动位置不能超过包含块的内边界，浮...
html标准流中的浮动元素之空间零占用
YaoDeBiAn的博客
08-15 2820
偶然的尝试，意外的发现 最近再跟着李炎恢老师学习的时候发现了一个虽然不起眼但感觉听巧妙的手法方式，以下是本人对该手法的描述： 比如说: yaodebian 而在css文件中，对上面的css设置是这样的： 第一种情况：（不对.main进行样式设置） .yao{ float:right; } 这时，我们通过浏览器审查元素，我们会发现，class值为’main’的div元素其width
解决float浮动元素不占据位置
weixin_42282391的博客
08-18 4703
1、利用after 设置div .clearfix:after { content: ''; display: block; clear: both; visibility: hidden ; } 2、利用overflow 设置div， div { overflow: hidden; } 3、利用clearn 浮动元素后添加div div { clear:both }
css float布局
ximingx
01-19 6820
CSS float 布局
css中float:right右对齐元素会换行不在同一条线上
09-25
float: left表示元素向左浮动，浮动元素后面的内容会环绕在它的右侧；float: right表示元素向右浮动，浮动元素后面的内容则会环绕在它的左侧。每种取值都会对布局产生不同的影响，选择合适的浮动属性值对于实现理想...
css给span加float:right右浮动后内容换行下移
09-25
根据CSS的浮动规则，没有浮动的元素会无视浮动元素的存在，继续在正常流中占据空间。因此，`<a>`标签保持在原来的位置，而`<span>`标签则被推至其右侧，但由于它们都在`<li>`元素内部，`<span>`无法超出`<li>`的边界...
关于浮动窗口占位的问题
liuxc的专栏
11-28 3085
关于浮动窗口占位的问题 一旦盒子被标记为浮动　　　这个盒子就脱离了ＤＯＭ　　父亲盒子的高度不会跟着浮动子盒子变得 你想让父亲盒子包住子盒子可以这样 再加个子盒子在2个浮动盒子下面 XML/HTML code ? 1 2 3 4 5 div id="father">   div style="float:left">float1div>   div style="float
css浮动float:left|right
preserveXing的博客
04-12 588
浮动浮动1.浮动是什么2.为什么要用浮动呢3.怎么做4.会怎样5.浮动产生的问题 浮动 1.浮动是什么 是一种css的样式 div{ float:left;//right } 1.可以让元素脱离文档流 取消在标准流中所占的位置 2.如果是left 靠近父元素的左边排列 如果是right 靠近父元素的右边排列 2.为什么要用浮动呢 进行水平排列 常见的元素 --行内元素 和块级元素 行内元素 水平排列 共同占一行但是不具有宽高属性 块级元素 垂直排列 单独占一行具有宽高属性 你会发
css学习笔记-float浮动布局
zzming的博客
08-06 381
浮动布局 HTML元素的分类 display属性 display:block 可以将不能设置宽度和高度的行内元素变得可以设置高度和宽度，例如a、span display:none 可以将元素隐藏 float浮动布局 float:left 将元素设置为浮动元素(float),块元素可以在同一行显示 .container{ width: 300px; height: 300px; border: 1px solid red; float: left; } .side{
CSS基础------详细了解float 浮动
coderWang
03-17 381
前言:在开始了解CSS浮动前先了解下 网页的三种布局方式 1.标准流(文档流、普通流) ①一个网页从上到下从左到右排列,类似于文本 ②块状元素独占一行，行内元素按照顺序并排 2.浮动float也就是本文重点 ①浮动不占位：浮动元素不占位置 ②默...
浮动元素不占空间的原因
橘猫吃不胖的博客
10-20 2100
为什么说浮动元素不占空间？ 以两个div为例，正常是俩个div都会显示出来，占据2空间。加入浮动后，div就会叠加显示在一个位置，此时要想让两个div正常显示一般要使用到margin-left浮动div的宽度，或者也是使用浮动。 如果不设置，div叠加在一个位置时，只是位置叠加，但div中的内容不会被覆盖，如果后面的div没有指定宽度则自动横向填充完整，文字过多则会跑到第一个div下面形成文字环绕效果。 如果指定宽度则会去掉被覆盖的宽度显示，其它的文字到浮动div下面显示，即产生文字环绕效果。 ...
前段小笔记
LHTY15091813836的博客
08-31 298
4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both。文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示。任何标签都可以设置浮动，元素设置浮动后，不再区分标签的分类了，都类似于行内块标签(可以设置宽高，具有盒模型特性)，子元素设置浮动后，脱离正常标准流，不占位，会导致父元素高度。...
【初级-个人理解】float是否脱离普通流？是否占据空间？以及浮动对内联和块元素的影响。
ellison的前端世界
11-30 4425
注：本文纯属个人理解。         First: “文档流”是，在css里面的定义是  normal flow（普通流）          链接（英文）：https://www.w3.org/TR/CSS21/visuren.html          链接（中文引用博客链接）：http://blog.youkuaiyun.com/winnersong/article/details/1379324
css:浮动定位（float）以及清除浮动
YangLu888
10-11 990
css的浮动定位以及清除浮动
css的浮动和定位
gfvghkfvkuhhkug的博客
11-07 517
定位是一种更为精确地控制元素位置的技术，通过设置元素的position属性为relative，absolute，fixed，或stickly，可以改变元素在文档流中的定位方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值