揭开浮动布局的秘密(简略版）

2024-05-10 20:13:05

　　正常情况下，页面中的块级元素(block)就好像一个个沉在水中的铁块，如果我们将铁块换成木块呢？显然它们会飘起来，浮在水面上，如图所示：

1、浮动导致的布局变动

　　这里使用浮动（float）这个词语实在是非常形象。当然，这里的浮动和现实中的浮动并非完全吻合。

　　float的4个可选项：none 、left、right、inherit。其中none为默认值，既不浮动，inherit表示继承父元素的float值。而left、right则很好理解，一个是向页面的左侧浮动，一个向右浮动。

（1）对于块级元素来说，在不设置宽度的情况下，默认的宽度是100%，一旦设置了浮动，它的宽度就会根据内容进行自动调整。

（2）设置了浮动的元素会脱离正常的文档流，我们可以这样理解：设置浮动后，元素不仅在y轴上浮动了起来，在z轴上，也浮动了起来。

（3）虽然浮动的元素脱离了文档流，但是里面的内容仍然占据空间，会根据相对位置进行布局。

2、清除浮动

　　清除浮动主要应用的是CSS的clear属性，clear属性定义了元素的哪一侧不允许出现浮动元素。可选项有left、right、both。

　　例：

　　　　

 1     html body div.chear,
 2     html body span.clear{
 3     background:none;
 4     border: 0;
 5     chear:both;
 6     display: block;
 7     float: none;
 8     font-size: 0;
 9     margin: 0;
10     padding: 0;
11     overflow: hidden;
12     visibility: hidden;
13     width: 0;
14     height: 0;
15 }

没有备注转载的文章都来自原创。转载需备注来源~

转载于:https://www.cnblogs.com/hakim-laohu/p/7612384.html

揭开浮动布局的秘密(简略版）相关推荐

当 position:sticky 遇到 bootstrap 浮动布局时候的踩坑记录
当第一次接触到 position:sticky 这个属性,我就意识到之前的不少 js 场景可以用这个 css 属性去改写.譬如网站右侧的不少广告,滚动上去后需要 fixed,完全就是 sticky ...
全球及中国新式茶饮行业销售价值与经营布局渠道研究报告2022版
全球及中国新式茶饮行业销售价值与经营布局渠道研究报告2022版 HS--HS--HS--HS--HS--HS--HS--HS--HS--HS--HS--HS-- [修订日期]:2021年11月 [搜索 ...
盒子模型+浮动布局+定位布局
盒子模型 border (边框)元素边框 margin 外边距 padding 内边距 content (内容)可以是文字或图片浮动布局 1.浮动:float:left/right; 2.清 ...
css搜索框变圆脸角,CSS浮动布局
CSS浮动布局浮动布局浮动是CSS布局中经常使用的一种手段,其实说白了就是使元素进行漂浮脱离正常的文档流排列机制,实现一堆原本的block状态的标签可以并排显示,当然这也可以使用display:i ...
sketch浮动布局_使用智能布局和调整大小在Sketch中创建更好的可重用符号
sketch浮动布局 Sketch is a widely used tool for UI designs. It implemented the Sketch是用于UI设计的广泛使用的工具. 它实 ...
网页设计图片向上浮动_果冻公开课第六课：5分钟理解浮动布局
浮动,是如何实现页面布局的呢? 它有哪些特质和使用方法? 今天,我们就用5分钟的动画短视频来深入浅出地理解浮动~ 动画视频: 果冻公开课:如何理解浮动布局? 文字解析: 网页儿也能这么图文并茂吗? 假 ...
IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世
https://github.com/youngsoft/MyLinearLayout 前言在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...
全球及中国泵真空系统行业发展战略与十四五布局规划报告2022版
全球及中国泵真空系统行业发展战略与十四五布局规划报告2022版 --------------------------------------- [修订日期]:2021年12月 [搜索鸿晟信合研究院查看 ...
3.css3深入，高级选择器浮动布局，html5/css3基础开始(推荐收藏)
文章目录 HTML03 CSS深入 1 案例:九宫格第二节:****CSS选择器深入**** 2.1 全局 * 2.2 并集选择器 2.4 儿子代选择器 2.5 后代选择器 2.8 css特性第三 ...

最新文章

热门文章