浮动的元素可以使字体围绕浮动的元素

最新推荐文章于 2023-10-18 21:02:51 发布
最新推荐文章于 2023-10-18 21:02:51 发布
阅读量763 收藏
点赞数 1
分类专栏： CSS 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jerny2017/article/details/79962801
版权 
<div style="width:100px;height:100px;float:left;border: 1px solid pink;"></div>
<div style="height:50px;border:1px solid #000;background-color:red">text text text text text</div>

jerny2017
关注
专栏目录
CSS总结（二）——文本、字体、浮动
m0_58822223的博客
06-03 238
一、文本 可以设置文本颜色，对齐方式以及行高等
浮动、定位、伪类、伪元素
m0_68870440的博客
04-20 473
浮动，定位，伪类，伪元素介绍
浮动元素贴靠现象和字围现象
407指导员
11-10 352
浮动元素贴靠现象 注意 1.浮动元素的紧贴现象就是为了不超出边界，一层层往前紧贴，直到贴的下为止。 2,。如果实在贴不下，那也没办法，只有紧靠着这个div贴着。
浮动元素排列规则、贴靠与字围现象
jwz934738949的博客
04-27 792
浮动元素排列规则： 相同方向上的浮动元素，先浮动的会显示在前面，后浮动的会显示在后面； 元素浮动后的位置，由元素在标准流中的位置决定。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>标题</title> <style> .cc ...
CSS中为什么float属性会制造文字环绕图片的效果
weixin_44805104的博客
09-27 743
首先，我们知道float属性会导致塌陷问题，按照经验来说塌陷之后会产生重叠的问题。 但我们在制造文字环绕图片时却不会重叠。 大神张鑫旭说“浮动的破坏性在于切断line box链，致使高度塌陷，但由于浮动元素仍在DOM tree中，实体是看得见摸得着的，所以其占据的实体位置还是在的。” 进一步翻译“脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进...
float之文字围绕图片
lbs311709000127的博客
01-17 888
效果图： 在这个案例中，只是给图片加了个float：left，文字就围绕图片了。 这是因为，图片虽然脱离了文档流，但仍在文本流当中，所以图片不会覆盖掉文字。并且浮动的图片只会使其之后的元素产生影响 所以对图片上一段的文字并不会产生影响（图片上面那一段文字围绕图片）。 下面是代码： <!DOCTYPE html> <html> <head> ...
浮动_style_浮动导航栏_css如何浮动_
09-29
在网页设计中，浮动（Float）是CSS布局的重要概念，它允许元素脱离其正常文档流并使其周围的元素围绕它流动。浮动最初是为了处理图像布局而引入的，但随着时间的推移，它已成为创建复杂的网页布局的工具之一。在这个...
CSS清除浮动float的三种方法小结
09-24
这样新元素会强制其下方的内容不再围绕浮动元素，从而解决浮动塌陷。同时，为了不产生视觉上的影响，这个新元素通常会被设置为零高度、零行高和无字体大小。 2. 父级元素设置`overflow: auto;` 另一种方法是为父级...
jQuery 实现侧边浮动导航菜单效果
10-25
本知识点主要围绕使用jQuery技术来实现一个侧边浮动导航菜单的效果进行阐述。 首先，侧边浮动导航菜单的设计目的是为了提高用户体验，当用户浏览内容较多的网页时，能够快速跳转到感兴趣的区域。这类菜单通常在页面...
元素浮动之后文字会环绕而不是重合原因示例解答
12-13
最近在学习CSS，在浮动上遇到一问题：既然浮动元素脱离了文档流，为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢？ 这问题困扰了我整整一天，上网各种搜、各种问人，也没有让我信服的答案（可能有的答案是正确的，但是我基础差，没有听懂）。最后经过一整天搜索、询问的沉淀，最后在别人的推荐下看了《CSS权威指南》，现在自认为算是基本上明白怎么回事了。以下都是我自己所想，希望可以帮到和我一样的初学者。如果有错误或者不妥的地方，也请高手指出，我定当改正，谢谢！！ 为了彻底明白这个问题，必须先弄明白几个问题。 第一，浮动的目的。最初时，浮动只能用于图像（某些浏览器还支持表的浮动），目的就是为了允许
浮动 二 文字围绕现象（中）
weixin_33762130的博客
05-06 95
接着讲block-level box了。。。block-level box不知道block-level box是如何产生的童鞋，请移驾这里，找第21条。会不会有童鞋疑惑 —— 块状的box竟然也能画圈圈 。。。哈哈哈，本小姐变给你看！要让块状的box画圈圈，得配合一定的形势！试想，如果这个block-level box在float box之前，它能够画吗？例一 block-level box在前，...
为什么元素浮动之后，文字会环绕在周边，而不是跟浮动元素重合？
风动之石的专栏
12-16 6747
最近在学习CSS，在浮动上遇到一问题：既然浮动元素脱离了文档流，为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢？ 这问题困扰了我整整一天，上网各种搜、各种问人，也没有让我信服的答案（可能有的答案是正确的，但是我基础差，没有听懂）。最后经过一整天搜索、询问的沉淀，最后在别人的推荐下看了《CSS权威指南》，现在自认为算是基本上明白怎么回事了。 为了彻底明白这个问题，必须先弄明白几个问题。
css的浮动详解
最新发布
m0_56713342的博客
10-18 2147
浮动 ：就是使用float样式，使元素脱离文档流可选值：none 默认值，不设置浮动left 向左浮动right 向右浮动一般情况下，我们是不给父元素设置高度的， 让其内部的子元素自动撑开父元素的高度， 这样父元素的高度就可以随着子元素高度的变化而变化 ,.然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌陷。
元素浮动之后文字会环绕而不是重合原因
袅袅青烟散的博客
03-22 812
既然浮动元素脱离了文档流，为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢？ 为了彻底明白这个问题，必须先弄明白几个问题。 第一，浮动的目的。最初时，浮动只能用于图像（某些浏览器还支持表的浮动），目的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。 第二，绝对定位与浮动的区别。 <body> <div id="container">
css布局技巧-文字围绕浮动元素巧妙运用
drnrrwfs的博客
02-24 135
?? 个人简介 ?? 作者简介：大家好，我是阿牛?? ?? 个人主页：?? ?? 支持我：点赞??+收藏+留言?? ?? 系列专栏：css?? ??格言：迄今所有人生都大写着失败，但不妨碍我继续向前！?? 上期传送门： ??css中的选择器 ??css盒子模型及其实战案例（上） ??css盒子模型及其实战案例（下） ??css网页布局之浮动及其实战案例（超详细） ??css中的定位详解 ??css中元素的显示与隐藏 ??我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧 ??css
行内元素在为什么设置浮动后可以设置高宽？？
IT技术宅-北方的刀郎
03-21 5066
行内元素在设置浮动后可以设置高宽？当该属性(display)不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。float在绝对定位和display为none时不会被应用。对应的脚本特性为stylefloat（ie）或cssfloat（非ie）。(注意这里为stylefloat或cssflo
如何利用浮动来使文字围绕图片呢？（56）
weixin_45147894的博客
06-19 621
先给一个大盒子里面装有一个div的盒子和一个p段落 。因为两个都是块元素，所以上下各自占领一行，以标准流进行排列！ 给图片加上宽高和进行浮动 现在文字围在图片旁边了！ 给图片所在盒子加上一个右边距。使其与文字有一定间距，这样看起来更好看一些！ 再给大盒子一个内边距，这样文字 效果就跟好了，再去除掉原来的全局内外边距！ 现在效果就很明显不错的啦！ ...
浮动的特点
m0_70552412的博客
06-01 813
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开， 如果希望块元素在页面中水平排列，可以使块元素脱离文档流 使用float来使元素浮动，使一个元素向其父元素的左侧或右侧移动，从而脱离文档流 可选值： none，默认值，元素默认在文档流中排列 left，，向页面的左侧浮动 right，向页面的右侧浮动 浮动的特点 1:浮动元素会脱离文
浮动布局与DIV+CSS入门教程
浮动元素可以左右移动，直到其外边缘碰到包含框或者另一个浮动元素的边缘。当元素浮动后，它不再参与普通文档流，而是浮于文档之上，不占据原本的空间，但仍然会影响周围的文本和元素布局。 浮动主要应用于以下场景...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值