css学习8：浮动和流体布局

最新推荐文章于 2022-07-20 16:57:14 发布
最新推荐文章于 2022-07-20 16:57:14 发布
阅读量350 收藏
点赞数
文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/D_evin_/article/details/120274916
版权
本文详细介绍了CSS中的浮动和流体布局。内容包括默认文档流、如何脱离文档流、浮动属性及其影响，以及清除浮动的方法。还讨论了浮动在流体布局中的应用，并提到了PC端页面布局的特点和CSS Reset的重要性。
摘要由CSDN通过智能技术生成

十七、浮动和文档流

1. 默认文档流

- 流就是文档布局的自身特性,而定位机制可能就会打破原有流的特性

- 默认文档流,画格子,内联和块级

  - 内联元素，从左向右排列

   - 块级元素，从上向下排列

2. 脱离文档流

文档一旦脱离文档流，不受文档流的布局约束了，在算其父元素的高度时，就不包括其自身了。以下属会导致元素脱离文档流：

- float 浮动

- position 定位(绝对定位、固定定位)

 2. 浮动

最低0.47元/天 解锁文章
D_evin_
关注
布局（一）——流体浮动三列布局
mmrsdym的专栏
03-02 895
今天看李炎恢老师的视频教程，学习了流体浮动布局，跟着教程写了流体浮动三列布局的代码，其中有一些自己的理解，总结一下，便于自己以后查看。     根据李炎恢老师总结的4种布局，分为：     1.流体浮动布局     2. 流体定位布局     3. 固定浮动布局     4. 固定定位布局 1. 流体浮动布局（可使不同大小的浏览器布满；缺点：易错位） 规格：当视窗变化时跟着变化   采用：浮动布
布局（一）——流体浮动布局
bigboy1010的博客
04-13 1415
记录一下自学过程中对布局的自我理解 一，流体布局 流体布局通俗的讲就像水上偏流的“盒子”一样，哪有缝隙往哪里流动，前提是缝隙放的下“盒子”的宽度，这里的“盒子”宽度用百分比表示，即：width：40%，（相对整个body的宽度），这也算是流体布局的一大优点，可以铺满屏幕 属性用到： float ：(为“盒子”添加浮动特性) 值 描述 left 元素向左浮动。 r...
CSS 流体布局
weixin_30877227的博客
05-09 210
流体布局设计随着用户对浏览器窗口的扩大或缩小而伸展或收缩。这种设计通常使用百分数。 优势 页面会伸展到整个浏览器窗口，所以即使在大屏幕上，页面的周围 也没有空白； 如果用户的窗口很小，页面就会收缩以适应窗口，而不必横向滚动； 即使用户设置的字体比设计人预设的更大，这种设计也可以适应（因为页面可以伸展）。 劣势 如果不对页面各个部分的宽度加以控制，那么页面设计会和预期的效果大...
几种常见的CSS布局-- 流体布局
LuckXinXin的博客
02-05 552
.left { float: left; width: 100px; height: 200px; background: red; } .right { float: right; width: 200px; height: 200px; background: blue; } .main { margin-left: 120px; margin-right: 220px; height: 200px; background: green; }
CSS-float浮动与流体布局（2）
柒青衿的博客
12-11 2069
2 float特性 2.1 包裹性 未浮动： hi 效果： 浮动后： hi 效果： 结论：未设宽度的块级元素浮动后展示效果如果内联元素，会自动收缩包裹其内容。具有相同特性的css样式还有： display:inline-block/talbe-cell position:absolute/fixed overflow:hidden/scroll 2.2
CSS-float浮动与流体布局（1）
柒青衿的博客
12-11 831
1 引言 float设计的初衷仅仅是实现文字环绕效果。所以当内部块级元素设置为float：left时，其兄弟的文字出现环绕效果： Float的设计初衷仅仅是:实现文字环绕效果 效果如下： 换成图片： 效果：
CSS3流体多列布局columns属性
九九极客云
12-10 466
一.早期多列问题 我们有时想布局成报纸、杂志那样的多列方式(至少两列，一般三列以上)，但早期CSS 提供的布局方式都有着极大的限制。如果是固体布局，那么使用浮动或定位布局都可以完成。但对于流体的多列，比如三列以上，那只能使用浮动布局进行，而它又有极大的限制。 因为它是区块性的，对于动态的内容无法伸缩自适应，基本无能力。 //五段内容，分为三列 <div> <p>我是第一段内容…省略的部分复制大量文本/p> <p>我是第二段内容…省略的部分复制大量文本/p>
css网站布局实录-2
12-15
流体布局使页面能适应不同屏幕尺寸，网格布局则提供了一种更灵活的多列布局方式，而响应式布局则解决了多设备适配的问题，确保网站在手机、平板和桌面电脑上都能良好显示。 4. **浮动与定位**：浮动（float）和定位...
CSS布局之流体浮动布局
liangde123的博客
07-17 3534
在CSS布局中经常使用的布局方式大值分为以下四种： 1、流体浮动布局 2、流体定位布局  3、固定浮动布局 4、固定定位布局 下面首先说下流体浮动布局; 假如我们要实现如下的布局情况： 则应该可以考虑采用流体浮动布局，其中CSS的样式如下： #header{ border:2px solid black; height:80px; back
css 固定 流体 弹性布局
04-10
NULL 博文链接：https://maoting.iteye.com/blog/1667254
CSS流体布局
尊哥的博客
09-07 3100
流体特性 图片宽度一直width:100%，依次点击3个按钮，结果随着margin, padding, border的出现，其可用宽度自动跟着减小，形成了自适应效果。就像放在容器中的水流一样，内容区域会随着margin, padding, border的出现自动填满剩余空间，这就是块状元素的流体特性。实例：flow.html 流体布局 稍微做一个调整，div距离容器左侧margin 15...
CSS浮动与流体布局
front_endxiaobaia的博客
04-01 212
(内容参照张鑫旭老师的慕课教程) 1. 文字环绕衍生-单侧固定 **描述**： 左侧固定宽度，右侧自适应 **实现**： 左侧固定元素设置width + float;右侧元素给予与width数值对应的margin-left\padding-left正值 **评价**： 在原本float的文本环绕效果上添加margin-left或padding-left 实现： * { ...
CSS布局方式之流动布局、浮动布局、定位布局讲解
weixin_44860226的博客
07-20 5278
css三种常规的布局方式，流动布局、浮动布局、定位布局等讲解
CSS流体布局详解
wzqnls
08-30 2297
占位
移动端视口、px、rpx
weixin_45985175的博客
07-31 1230
1、现状 移动端设备屏幕尺寸非常多，碎片化严重。Android设备有多种分辨率：480x800, 480x854等。作为开发者无需关注这些分辨率，因为常用的尺寸单位是 px 。 移动端浏览器我们主要对webkit内核进行兼容，我们现在开发的移动端主要针对手机端开发。 2、视口 视口就是浏览器显示页面内容的屏幕区域 视口分为布局视口、视觉视口和理想视口 我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽 想要理想视口，我们需要给我们的移动端页面添加 meta视口标 2.1 布局视口
float详解、圣杯布局
weixin_30843605的博客
06-09 243
一、开始 虽然现在有了flex弹性盒子模型，很多布局效果都可以通过flex盒子来实现，但由于flex盒子模型的兼容性不容乐观 ie至少要10才能支持flex，所以还是很有必要学习float流式布局的 二、实例 正常的块级元素的布局是这样的：（文字代表元素的float属性） 对于float布局要记住： 　　1.如果浮动元素的上一个元素也是浮动，那么该元素会与上一个元素排列在...
93_css笔记9_css的浮动流布局（float布局）
a_horse的博客
11-19 151
一，float属性：设置float浮动 float 属性定义元素在哪个方向浮动 left    元素向左浮动。 right    元素向右浮动。 none    默认值。元素不浮动，并会显示在其在文本中出现的位置。 inherit    规定应该从父元素继承 float 属性的值。 二，clear属性：清除float浮动 left    在左侧不允许浮动元素。 right    在右侧不允...
前端开发--css--屏幕适配--流体布局、响应式布局
sundanping_123的博客
07-17 274
屏幕缩小 文字不能缩小 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi...
理解CSS浮动：浮动与浮动布局
4. **流体布局与响应式设计**：探讨浮动在创建流体布局和响应式设计中的作用，如何利用浮动适应不同屏幕尺寸。 5. **浮动与浏览器兼容性**：分析不同浏览器对浮动的支持情况，提供解决跨浏览器兼容性问题的策略。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

D_evin_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值