百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> CSS浮动怎么做
分享文章到:

CSS浮动怎么做

发布时间:09/01 来源:未知 浏览: 关键词:

浮动的框可以向左或向右移动,直到它的外边沿碰到包括框或另一个浮动框的边框为止。

由于浮动框不在文档的一般流中,所以文档的一般流中的块框展现得就像浮动框不存在一样。

CSS 浮动,在 CSS 中,我们通过 float 属性实现元素的浮动。 ( 引荐学习:CSS教程 )

请看下图,当把框 1 向右浮动时,它离开文档流并且向右移动,直到它的右侧缘碰到包括框的右侧缘:

css-4.gif

再请看下图,当框 1 向左浮动时,它离开文档流并且向左移动,直到它的左边沿碰到包括框的左边沿。由于它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消逝。

假如把所有三个框都向左移动,那么框 1 向左浮动直到碰到包括框,别的两个框向左浮动直到碰到前一个浮动框。

css-5.gif

如下图所示,假如包括框太窄,没法容纳水平摆列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。假如浮动元素的高度不一样,那么当它们向下移动时大概被其它浮动元素“卡住”:

css-6.gif

以上就是CSS浮动如何做的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板