how2j.cn


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

属性:float
值: left,right

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

示例 1 :

文字向右浮动

文字向右浮动
浮动后,原来的“”就让出来了
并且是在原来的高度的基础上,向右浮动
运行效果
<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 :

文字向左浮动

文字向左浮动
首先,向左浮动后,会把“坑”让出来,这个时候"正常的文字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 :

文字围绕图片

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


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

文字不想围绕图片

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


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

水平排列div

默认的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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2017-08-04 可以设置浮动的距离么
黑键
设置浮动多远




1 个答案

how2j 答案时间:2017-08-07
要控制水平位置,可以结合水平内外边距来达到效果




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-07-15 如题
status



网上找的一段代码,为神魔 dt不加清除浮动(clear:left)就不会向左对齐了呢,求站长解答。。。 PS:只能上传一张截图??
<!DOCTYPE html>
<html>

<head>
<style>
h4{font-size:14px;color:#333;}
dl{border:dashed 1px #666;font-size:14px;padding:4px;background:#fdfbdb;}
dt{float:left;clear:left;}
dd{text-align:right;font-size:12px;color:#666;}
a{color:#069;}
</style>
</head>
<body>
<h4>www.51obj.cn站点文章列表摘要</h4>
<dl>
<dt><a href="http://www.51obj.cn/" title="51obj.cn">文章一:javascript程序的优化</a></dt>
<dd>文章发布时间:2010-4-17</dd>
<dt><a href="http://www.51obj.cn/" title="51obj.cn">文章二:深入解析JavaScript中eval</a></dt>
<dd>文章发布时间:2010-4-17</dd>
<dt><a href="http://www.51obj.cn/" title="51obj.cn">文章三:实现SQL高并发的问题</a></dt>
<dd>文章发布时间:2010-4-17</dd>
</dl>
</body>
</html>

							


3 个答案

how2javaweb 答案时间:2018-05-10
浮动很简单,其实浮动的 元素 脱离了文档流。

Jockey 答案时间:2018-03-15
因为dt的高度是14px,dd的高度是12px。换行之后dt向左浮动会碰到前面一个dt的边框。

how2j 答案时间:2017-08-31
所以要加清除嘛,清除就是做这个用的呢




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-04-29 文字向左浮动里面
2017-04-25 能说说绝对定位和浮动各有什么作用吗
2017-03-18 div#floatingDiv div{} 后面那个div?




提问之前请登陆
关于 前端部分-CSS-浮动 的提问

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

上传截图