how2j.cn


工具版本兼容问题
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

属性:float
值: left,right


示例 1 : 文字向右浮动   
示例 2 : 文字向左浮动   
示例 3 : 文字围绕图片   
示例 4 : 文字不想围绕图片   
示例 5 : 水平排列div   

示例 1 :

文字向右浮动

edit
文字向右浮动
浮动后,原来的“”就让出来了
并且是在原来的高度的基础上,向右浮动
运行效果
<style> .f{ float:right; } </style> <div >正常文字1</div> <div >正常文字2</div> <div class="f">浮动的文字</div> <div >正常文字4</div> <div >正常文字5</div>
<style>
.f{
  float:right;
}

</style>

<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮动的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

文字向左浮动

edit
文字向左浮动
首先,向左浮动后,会把“坑”让出来,这个时候"正常的文字4“ 就会过来试图占这个坑,但是,发现 “浮动的文字”并没有走,结果,就只好排在它后面了
运行效果
<style> .f{ float:left; } </style> <div >正常文字1</div> <div >正常文字2</div> <div class="f">浮动的文字</div> <div >正常文字4</div> <div >正常文字5</div>
<style>
.f{
  float:left;
}

</style>

<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮动的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

文字围绕图片

edit
当图片不浮动时,文字就会换行出现在下面
当图片浮动时,文字围绕着图片
和步骤2一样,当图片浮动的时候,就会让出这个“坑”出来,这个时候文字就试图去填补这个“坑”,结果发现,尼玛,图片没走,那就只好围绕图片摆放了
运行效果
<style> .f{ float:left; } div{ width:320px; } </style> <div > <img src="https://how2j.cn/example.gif"/> <p> 当图片不浮动时,文字就会换行出现在下面 当图片不浮动时,文字就会换行出现在下面 当图片不浮动时,文字就会换行出现在下面 当图片不浮动时,文字就会换行出现在下面 当图片不浮动时,文字就会换行出现在下面 当图片不浮动时,文字就会换行出现在下面 </p> </div> <div > <img class="f" src="https://how2j.cn/example.gif"/> <p> 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 </p> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

文字不想围绕图片

edit
不允许出现浮动元素
属性:clear
值: left right both none
如果p左边出现了浮动的元素,如此例,则设置clear:left 即达到不允许浮动元素出现在左边的效果
运行效果
<style> .f{ float:left; } div{ width:320px; } .clearp{ clear:left; } </style> <div > <img class="f" src="https://how2j.cn/example.gif"/> <p> 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 </p> </div> <div > <img class="f" src="https://how2j.cn/example.gif"/> <p class="clearp"> 当图片浮动时,文字却不想围绕图片 当图片浮动时,文字却不想围绕图片 当图片浮动时,文字却不想围绕图片 当图片浮动时,文字却不想围绕图片 </p> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
默认的div排列是会换行的
如果使用float就可以达到水平排列的效果,通常会用在菜单,导航栏等地方
如果超出了父容器,还会有自动换行的效果
运行效果
<style> div#floatingDiv{ width:200px; } div#floatingDiv div{ float:left; } </style> 默认的div排列是会换行的 <div> 菜单1 </div> <div> 菜单2 </div> <div> 菜单3 </div> 如果使用float就可以达到水平排列的效果,通常会用在菜单,导航栏等地方 如果超出了父容器,还会有自动换行的效果 <div id="floatingDiv"> <div> 菜单1 </div> <div> 菜单2 </div> <div> 菜单3 </div> <div> 菜单4 </div> <div> 菜单5 </div> <div> 菜单6 </div> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-10-08 不是很懂示例五中的第二个CSS
fish_github

div#floatingDiv div{ float:left; } 请问这个的float:left;为什么不放在上面那个里面的




2 个答案

mayunfei
答案时间:2021-03-05
代表着ID名为floatingDiv的div板块里面的所有div都设置为浮动的

GeorgeJava
答案时间:2020-11-18
需要将下面父框里面的东西全部设置成浮动,所以后面还需要加个div,表示里面全部都浮动



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2020-05-11 为啥我看不到浮动效果?
laohubb




没看到浮动效果,这效果已经取消了?
加载中

							

							


1 个答案

LuzfeI
答案时间:2020-05-14
把那个width改成200px就有了



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-08-04 站长牛逼
2019-08-01 浮动,没有想像的那么简单啊
2019-07-30 这个是不是还可以有另一种方法


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 6 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-CSS-浮动 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图