浅谈元素的浮动

最新推荐文章于 2024-08-31 20:43:54 发布

明日份可乐

最新推荐文章于 2024-08-31 20:43:54 发布

阅读量213

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS

本文链接：https://blog.youkuaiyun.com/ron_wang_/article/details/99415356

HTML/CSS 专栏收录该内容

14 篇文章

订阅专栏

元素的浮动

浮动主要用来做文字环绕特效水槽原理
浮动元素不能超过上一个兄弟元素(无论是否浮动)
浮动元素在一行排列顶部对齐

浮动的影响:

浮动对于行标签：可以设置宽高，完美支持margin
浮动对块标签：可以设置宽高，不再独占一行

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

明日份可乐

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

元素的定位与浮动

little_little0_0的博客

10-21

644

经典盒模型的结构：定位：元素的定位通常使用position属性，其适用于所有元素。position的取值及含义如下： static（默认值）：文档流中正常显示； relative：相对于它在文档流中应该占据的位置进行定位，原来占有的空间仍保留； absolute：相对于其属性不为static的祖先元素的内容区进行定位，其原先在文档流中占据的位置完全消失，好像不存在一样。定位后都会...

元素的浮动

qq_42000660的博客

07-15

1059

1、浮动元素会脱离网页文档,与其他元素发生重叠但是，不会与文字内容发生重叠，如下面案例： 1)通过元素的浮动，可以生成文字浮动的效果代码： <style type="text/css"> .d1{ height: 200px; width: 200px; background-color: red; float: left; } .d2{ height: 300px; width: 500px; background-color: sky...

参与评论您还未登录，请先登录后发表或查看评论

浮动元素详解

NewWent的博客

03-24

3599

为什么需要浮动元素？ 1. 行内元素（包括文字、input、button等等）环绕浮动元素，这也是float设计之初的目的，可以实现文字环绕图片等效果 2. 较早时期用来进行页面布局，现在有了inline-block、flex、grid等等更方便的方法浮动元素布局原理浮动元素会根据属性值向左或向右浮动，浮动元素会脱离标准文档流，进入浮动流，浮动流内的浮动元素可以左右移动，直至外边缘碰到包含块或...

CSS元素的浮动

weixin_41350225的博客

12-04

211

浮动由float控制 ① 该属性可以使元素脱离文档流，在父容器中进行浮动，停靠到父元素的“内容边界”或其它浮动元素的“边框” ② 浮动的元素会忽略元素间的“空格”，让同样具有该属性的元素“紧密”地排列在一起 ③ 该属性通常用于处理一些需要紧密排列在一起的“块级元素”，如“导航条”、“相册”，或用于处理“图文混排”等该属性有三个允许的值：值描述 non...

元素的浮动 float

qq_42855675的博客

09-30

256

浮动属性（float） 1.left：对象居左浮动，文本流向对象的右侧 2.right：对象居右浮动，文本流向对象的左侧 3.none：对象不浮动，默认值清除浮动 clear： 1.left：清除左侧浮动的影响 2.right：清除右侧浮动的影响 3.none：不清楚浮动，默认值 4.both：同时清除左右两侧浮动的影响注：清除浮动后使元素独自占据一行，该方法不适用于清除子类元素浮动对父类元素...

元素浮动float

weixin_46025563的博客

02-23

507

定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。就好好比在宽度只有10...

浅谈CSS浮动的特性

09-24

1. **盖不住的文本**：当一个元素浮动后，它不会覆盖其后的文本内容，而是文本会自动围绕这个浮动元素排列。这是因为浮动元素的主要目的是为了与文本共存，实现文字环绕的效果。例如，我们可以通过设置`.item1`浮动...

浅谈CSS浮动的那点事儿

09-24

当子元素浮动后，如果父元素没有设定固定高度，它可能会因为无法感知到浮动子元素的高度而塌陷。解决这个问题有多种方法： 1. 使用clearfix类：通过添加特殊的CSS选择器，如`.clearfix::after { content: ""; ...

浅谈css中浮动和清除浮动带来的影响

09-27

在CSS中，浮动元素会脱离标准文档流，允许其他非浮动元素移动到其旁边，以此实现多列布局或者元素并排显示。浮动的主要属性包括`float: left;`和`float: right;`。当一个元素设置为`float: left;`时，它会尽可能地...

CSS--浮动元素

mvvm实现原理

01-20

1045

虽然css浮动是每个fe都认为烂熟于心的知识点，但实际上本文出现的4个demo，我问了身边的几个同事，都会出现错误的判断，可见css知识看似容易理解，但很多小细节都容易忽略。本文将复习css的浮动元素，主要讲解浮动元素的概念，特点，以及如何消除浮动。以4个demo来理解浮动元素的特点。浮动float 浮动元素是指元素脱离了常规流，向左/右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 ...

元素的浮动布局

yanhua1575的博客

03-18

257

浮动元素会脱离网页文档,与其他元素发生重叠，但是不会与文字内容发生重叠利用这一特性可以做出文字浮动效果浮动方式： <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .green{ ...

关于浮动元素与定位元素的理解

qqqqwqqqqq的博客

12-03

495

浮动元素：设置浮动后的浮动元素属于半脱离文档流的元素，在浮动元素后加上的元素将会在浮动元素同一行追加，当父级元素宽度不够是将会在下一行显示。解决浮动的问题： 1.给父级加上高度当子元素设置浮动后讲无法撑开父级高度的情况。 2、给父级加上overflow:hidden 缺点二级菜单无法实现 1.解决元素浮动后无法撑开父级高度的情况 2.解决margin塌陷的问题 3、给父元素加...

CSS设置元素浮动--03

xym222的博客

09-01

2021

1、元素浮动–float属性通过浮动可以使一个元素向其父元素的左侧或右侧移动，使用 float 属性来设置元素的浮动，可选值： none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动注意：元素设置浮动以后，水平布局的等式便不需要强制成立元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动浮动的特点：浮动元素会完全脱离文档流，不再占据文档流中的位置设置浮动以后元素会向父元素的左侧或右侧移动浮动元素默

总结浮动元素float知识点。

独滕的博客

09-09

1298

浮动元素float css布局的三种机制分别是普通流（标准流）、浮动和定位 1.标准流块级元素会独占一行从上向下排列。行内元素会按照顺序排列，从左往右排碰到父级元素则会自动换行 2.浮动让盒子从普通流中浮起来，主要让多个块级盒子一行显示 3.定位将盒子定在浏览器的某个位置浮动为什么需要浮动？它可以实现多个元素一行显示，而之前学的行内块（inline-block）也可以实现但会有空白间隙，也不可以实现空盒子左右对齐 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-

浮动元素float的详细内幕

code_ja的博客

06-26

1334

一些规则控制着浮动元素的摆放，规则如下： 1.浮动元素的左右外边界不能超过其包含块内容区的左右内边界（包含块就是其最近的块级祖先元素） 2.为防止浮动元素彼此覆盖，如果一个元素向左浮动，而另一个元素已经在那个位置，后放置的元素将挨着前一个浮动元素的右外边界放置。但是如果一个浮动元素的顶端在之前所有浮动元素的底端下面，它就可以一直浮动到父元素的内左边界。如下图： 3.假设父元素的宽度为500

关于浮动元素的经典考题

鬼眼邪神

05-10

569

请看下面代码：如何在不改变上述代码、不使用绝对定位和相对定位的情况下，实现如下效果图：答案如下： HTML5 * {margin:0;padding:0;} .one { width:200px; height:200px; background:red; float:left; } .two { background:blue;

css的浮动详解

m0_56713342的博客

10-18

2319

浮动：就是使用float样式，使元素脱离文档流可选值：none 默认值，不设置浮动left 向左浮动right 向右浮动一般情况下，我们是不给父元素设置高度的，让其内部的子元素自动撑开父元素的高度，这样父元素的高度就可以随着子元素高度的变化而变化 ,.然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌陷。

CSS-浮动【看这一篇就够了】

zheshiyangyang的博客

08-31

2095

:after。

必会:为什么会出现浮动？浮动元素会引起什么问题？如何清除浮动？

weixin_57066052的博客

09-08

878

为什么出现浮动浮动定位将元素排除在普通流之外，即元素讲脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留. 为什么需要清除浮动 1、父元素的高度无法被撑开，影响与父元素同级的元素； 2、与浮动元素同级的非浮动元素（内联元素）会跟随其后； 3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法. 清除浮动的方式 1、使用 CSS 中的 clear:both;（放一个空的 div，并设置上述 css）,属...

网页元素浮动函数