分类

商品

商品

店铺

资讯

热门搜索 : WordPress 织梦企业官网小说源码 Discuz

服务器低至9.9￥/月

当前位置：首页 > 资讯 > 网页前端 > CSS

网站前台新手必学CSS代码之浮动代码

时间：2018-11-07 23:20 作者：菜鸟程序猿来源：菜鸟程序猿阅读：1120
扫一扫，手机访问

摘要：浮动的定义float:left;(向左浮动) float:right;（向右浮动）使元素脱离文档流，按照指定方向（左右）发生移动，遇到父级边界或者者相邻的浮动元素停了下来。文档流是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)脱离文档流：在页面中不占位置浮动的一般情况当把框 1 向右浮

浮动的定义

float:left;(向左浮动) float:right;（向右浮动）

使元素脱离文档流，按照指定方向（左右）发生移动，

遇到父级边界或者者相邻的浮动元素停了下来。

文档流

是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)

脱离文档流：在页面中不占位置

浮动的一般情况

当把框 1 向右浮动时，它脱离文档流并且向右移动，

直到它的右边缘碰到包含框的右边缘

网站前台新手必学CSS代码之浮动代码

无浮动

网站前台新手必学CSS代码之浮动代码

向左浮动

网站前台新手必学CSS代码之浮动代码

向右浮动

浮动的特殊情况

当框 1 向左浮动时，框1不占空间，相当于悬浮，

框1覆盖住了框 2，使框 2 从视图中消失。

网站前台新手必学CSS代码之浮动代码

给了浮动的元素，只会影响后面的元素；(任何元素都可以浮动)

假如父级宽度太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会往下掉

网站前台新手必学CSS代码之浮动代码

假如浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

网站前台新手必学CSS代码之浮动代码

动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因而，创立浮动框可以使文本围绕图像

网站前台新手必学CSS代码之浮动代码

好了这期就到这里，要是觉得还行那就关注我吧，我会送出一套网站前台的基础视频，需要的可以找我哟

最后要是有什么不对的地方欢迎大神在评论区留言吐槽。

网站前台新手必学CSS代码之浮动代码

全部评论(0)

上一篇：CSS浮动和浮动清除讲解
下一篇：前台CSS常见面试题：清理浮动的方式汇总

最新发布的资讯信息
【系统环境|】2FA验证器验证码如何登录(2024-04-01 20:18)
【系统环境|】怎么做才能建设好外贸网站？(2023-12-20 10:05)
【系统环境|数据库】潮玩宇宙游戏道具收集方法(2023-12-12 16:13)
【系统环境|】遥遥领先！青否数字人直播系统5.0发布，支持真人接管实时驱动！(2023-10-12 17:31)
【系统环境|服务器应用】克隆自己的数字人形象需要几步？(2023-09-20 17:13)
【系统环境|】Tiktok登录教程(2023-02-13 14:17)
【系统环境|】ZORRO佐罗软件安装教程及一键新机使用方法详细简介(2023-02-10 21:56)
【系统环境|】阿里云 centos 云盘扩容命令(2023-01-10 16:35)
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜，竟然是因为“断崖式”的降价(2022-04-12 19:47)

微上宝科技

店铺

血鸟云

推荐商品

手机访问领取大礼包