html/css中float浮动的用法实例详解

  发布时间:2019-09-10 14:31:50   作者:佚名   我要评论

这篇文章主要介绍了html/css中float浮动的用法实例详解,需要的朋友可以参考下

一、float基础用法示例

1、我们先建两个div盒子,设置高度、宽度和背景颜色;

最开始两个盒子在网页上的位置如下:

 然后我们将红色盒子浮动到右边

 然后我们会发现红色盒子浮动到了右边,但是蓝色盒子就直接上移到了原先红色盒子的位置。

然后我们将蓝色盒子也浮动到右边看看效果:

我们会发现它会紧跟着红色盒子排列,而不会受块级元素影响独占一行。

二、浮动定位的基本规则

1、当元素的float属性取值为left或right时,元素属于浮动定位;

2、若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动;

3、浮动盒子的顶边不得高于上一个盒子的顶边;

4、浮动盒子在摆放时,要避开常规流盒子;常规流盒子在摆放时,无视浮动盒子;

5、常规流盒子的自动高度计算时,无视浮动盒子

6、清除浮动:clear:both(左或右)。

总结

以上所述是小编给大家介绍的html/css中float浮动的用法实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • CSS清除浮动float的三种方法小结

    使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。本文给大家带来了CSS清除浮动float的三种方法小结,感兴趣的朋友跟随脚本之家小编一起
    2018-03-13
  • 详解css清除浮动float的七种常用方法总结和兼容性处理

    这篇文章主要介绍了详解css清除浮动float的七种常用方法总结和兼容性处理,非常具有实用价值,需要的朋友可以参考下
    2017-09-11
  • CSS的position定位和float浮动详解

    本文详细介绍了CSS中position定位和float浮动的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-24
  • CSS使用float属性设置浮动元素的实例教程

    这篇文章主要介绍了CSS使用float属性设置浮动元素的实例教程,包括使用overflow清除浮动的方法,需要的朋友可以参考下
    2016-07-07
  • 理解CSS浮动float、定位position

    本文针对CSS浮动float、定位position进行学习理解,通过实例帮助大家掌握CSS浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下
    2016-04-21
  • css浮动(float/clear)使用讲解

    这篇文章主要介绍了css浮动(float/clear)使用方法,如果你理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你
    2014-03-14
  • css浮动(float,clear)通俗讲解经验分享

    对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程,前两天终于搞懂了浮动的基本原理,迫不及待的分享给大家,感兴趣的朋友可以参考下哈,希望
    2013-03-28

最新评论