文章目录

  • 前言
  • 一、标准文档流
  • 二、三种布局方式
    • 1.流式布局
    • 2.浮动布局
      • （1）字围效果
      • （2）圣杯布局
    • 3.层布局
      • 定位的分类：
      • （1） 相对定位 position:relative
      • （2） 绝对定位 position:absolute
      • （3） 固定定位 position:fixed
      • （4） 静态定位 就是不定位 默认的
  • 三、浮动元素会造成影响：
    • 1.对父元素造成的影响
      • 解决方法
    • 2.对兄弟元素造成的影响
      • 解决方法
  • 四、浮动元素的特性

前言

布局：所谓的布局，就是指把一个盒子放在合适的位置。
在CSS2.0中，有三大布局：
（1）流式布局：最简单，我的盒子默认的布局.
（2）浮动布局：会难一点，在写PC端网页时，浮动布局还是主流，后面说CSS3时，还会讲一种布局方案，叫flex布局。
（3）层布局：定位

提示：以下是本篇文章正文内容，下面案例可供参考

一、标准文档流

整个html标签，就是一个BFC:块格式化上下文 (Block Formatting Context) （后面再细说BFC），每一个BFC都是彼此独立。
其中html标签形成的BFC，规定了，男盒子需要独占一行，女盒子和人妖盒子需要并排显示，满一行也会自动换行。
默认是从上到下，从左到右进行布局，这就形成一个标准的文档流。

二、三种布局方式

1.流式布局

流式布局按标准文档流进行布局的，也是默认的布局方式，这种布局方案，是最简单的一种布局方案。
**缺点：**功能太弱。
如果只使用流式布局，并不能完成复杂页面的开发。因为复杂页面中有很多的男盒子，需要并排显示。

2.浮动布局

为了让男盒子可以并排显示，此时，就需要使用浮动布局。浮动发明的原因，刚开始是让文字环绕浮动的元素，形成字围效果。

标准文档流规定：
1）男盒子需要独占一行，女盒子和人妖盒子需要并排显示，满一行也会自动换行。
2）默认是从上到下，从左到右进行布局，这就形成一个标准的文档流。

  • 如果一个元素浮动了，它会半脱离标准文档流，或者说，标准文档流中的规定，有些就不再适合。
  • 如果说，img完全脱离了标准文档流，后面的元素就会向上钻。img会覆盖到文字上面的。测试发现，发现，文字并没有钻到img后面的，说明，这个图片，并没有完全脱离标准文档流。
  • 这种情况，叫字围效果。 就是文字围绕浮动的元素。发明浮动时，就是为了实现字围效果。
  • 后来，发现，浮动，可以让男盒子并排显示，慢慢地，我们都使用浮动，让男盒子并排显示。
  • 脱离标准文档流：（1） 半脱离（2） 完全脱离

（1）字围效果

例：字围效果代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{ margin: 0; padding: 0; }.box{width: 400px;height: 400px;border: 2px solid red;}.box img{/* 让img浮动起来 */float: left;}</style>
</head>
<body><div class="box"><!-- src指定远程图片 --><!-- width="200"  它的高度会等比例缩放 --><!-- 人妖标签 --><img width="300" src="http://www.xinhuanet.com/photo/2021-03/14/1127209576_16157161876421n.jpg" alt=""><!-- 男标签  p标签里面的文本满一行会自动换行 --><p>3月14日，秧歌队员在山东省惠民县皂户李镇表演。惠民县泥塑历史悠久，农历二月初二有捏泥塑、跑秧歌的传统。当日是农历二月初二，人们在丰富多彩的民俗活动中欢庆传统节日。新华社记者 范长国 摄</p></div>
</body>
</html>

字围效果：

（2）圣杯布局

典型的一种布局方式：圣杯布局。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{ margin: 0; padding: 0; }.wrapper{ width: 800px; height: 600px; border: 1px solid red; /* auto 表示尽可能大 */margin: 10px auto;}.wrapper .header, .wrapper .footer{width: 800px; height: 100px;background-color: gold;text-align: center;line-height: 100px;}/* 就近原则 */.wrapper .footer{ background-color: skyblue; clear: both;}.wrapper .main .left, .wrapper .main .right{width: 200px;height: 400px;background-color: pink;float: left;}.wrapper .main .right{ background-color: springgreen;}.wrapper .main .center{width: 400px;height: 400px;background-color: rebeccapurple;float: left;}   </style>
</head>
<body><!-- 圣杯整体start --><div class="wrapper"><!-- header start --><div class="header"><h1>header</h1></div><!-- header end --><!-- main start --><div class="main"><div class="left"><h1>left</h1></div><div class="center"><h1>center</h1></div><div class="right"><h1>right</h1></div></div><!-- main end --><!-- footer start --><div class="footer"><h1>footer</h1></div><!-- footer end --></div><!-- 圣杯整体end -->
</body>
</html>

圣杯布局：

使用浮动的目的：让块级元素可以并排显示。float:left/right/none; 默认就是不浮动。
浮动的元素会以它后面的兄弟元素造成影响，我们要清除这种影响，如何清除？clear:both;
谁受影响了，clear写在谁上面。

  1. 不使用浮动，使用人妖标签，让块级元素并排显示。遇到的问题：特别需要注意标签的换行
  2. 解决：（1）不要有换行（2）font-size：0 换行符的那个间隙也是有font-size来计算出来给对应的父元素设置font-size为0，这样就没有间隙了。但是需要给对应的行内块重新设置font-size。

3.层布局

在开发网页时，有时候，仅仅使用上面的两种布局，并不能完成我们的需求。此时，就需要使用层布局，说白了，就是定位。通过定位使用的布局，叫层布局。

定位的分类：

（1） 相对定位 position:relative

依据原本的位置进行定位，参考点：本身的位置，

问： 只要定位肯定需要设置偏移量。如何设置偏移量？
答： top, left, bottom, right 绝大部分情况下，只会用其中两个

应用场景： 在原本的位置基本上，进行偏移时，可以使用相对定位。

  1. 对一个盒子的位置进行微调。
  2. position:relative 这一行代码还有一个作用，设置绝对定位的参数点。

注意细节：

  1. 相对定位的元素脱离标准文档流，但是它原本的位置还是被自己占用着，别人无法占用。
  2. 不管一个盒子，之前是什么性别，定位完后，还是什么性别。
  3. 当进行了相对定位，基本上都要通过top, left, bottom, right来设置偏移量。
  4. 如果设置了margin也会影响位置。

（2） 绝对定位 position:absolute

绝对定位：格式：position:absolute。

参考点，需要我们自己去设置，写一行代码来设置：position:relative

如果不设置参考点，就一级一级向上找，直到body，最终就以body作为参考点。只要是定位，都要设置偏移量。top、left, right, bottom。 一般我们会给绝对定位的元素的父元素设置成参考点：子绝父相（参考点）。

应用场景： 在原本的位置基本上，进行偏移时，可以使用相对定位。

  1. 让块级元素水平垂直居中。
  2. 在写一些效果时，绝对定位使用的还是比较多，如：轮播图…
  3. 在写动画时，会也使用到绝对定位。

注意细节：

  1. 绝对定位的元素是完全脱离标准文档流。
  2. 一个元素绝对定位后，显示在什么地方，主要看你把参考点设置在了什么地方，如果没有设置，最终就以body作为参考点。
  3. 一个元素绝对定位了，就变性了，女盒子就变成男盒子（行内元素就变成块级元素）。
  4. 绝对定位也需要设置偏移量，有两个方向: left right 另一个方向是top bottom，设置偏移量，一般是两个方向选其一。
  5. 一般情况下，我们是给父元素设置参考点，口决：子绝父相。
  6. 定位完，还可以通过margin调整它的位置。

多个元素都进行了绝对定位，都完全脱离了标准流 ，多个元素可能发生重叠 。默认情况下，后面的元素会覆盖前面的元素 。
使用绝对定位让一个盒子水平居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{ margin: 0; padding: 0; }.father{width: 350px;height: 350px;background-color: gold;position: absolute;/* 是body高度50% */top: 50%;/* 是body宽度的50% */left: 50%;/* 定位的元素，还可以通过margin继续改变它的位置 *//* margin也可以为负值 */margin-top: -175px;margin-left: -175px;}</style>
</head>
<body><div class="father"></div>
</body>
</html>

（3） 固定定位 position:fixed

固定定位： 参考点：是整个浏览器窗口。也需要设置偏移量：top right bottom left。语法： position:fixed。多用于网页的头部区域固定。
注意细节：

  1. 完全脱离标准文档流。
  2. 不管是什么性别的元素，固定定位了，都会就成男的。
  3. 固定定位的参考点是浏览器的窗口，不会随着内容的滚动而滚动。
  4. 对于固定定位，有些低版本浏览器支持并不好，使用的时候，需要考虑兼容性问题。

（4） 静态定位 就是不定位 默认的

三、浮动元素会造成影响：

1）是对父元素造成影响
2）对后面的兄弟元素造成影响

1.对父元素造成的影响

  • 当父元素中的所有元素都浮动了，并且父元素没有设置高度，父元素的高度就会变成0，也叫父元素高度塌陷。
  • 如果造成了影响，我们需要清除这种影响，清除这种影响，我们叫也清除浮动。

例：三个子元素都浮动，且父元素没有设置高度，这种情况，父元素的高度就会塌陷

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.father{ width: 800px; border:2px solid red;}.son1{ width: 100px; float: left; height: 100px;background-color: gold; }.son2{ width: 120px; float: left; height: 70px;background-color: skyblue; }.son3{ width: 220px; float: left; height: 180px;background-color: pink; }</style>
</head>
<body><div class="father"><div class="son1">son1</div><div class="son2">son2</div><div class="son3">son3</div></div>
</body>
</html>

如下：

解决方法

（1）加高法。手动给父元素加上高度 用的不多。在写页面时，如果说盒子的高度就是靠内容撑起来的，此时，使用加高法，就不适合。

<style>
.father{ width:800px;border:2px solid red; height: 200px;}
</style>

（2）overflow:hidden 可以让一个盒子形成BFC，overflow:hidden它的本意并不是用来清除浮动，但是它有这么一个作用，可以清除浮动元素对父元素造成的影响，可以把它当前一个小偏方。

<style>
.father{ width: 800px; border:2px solid red; overflow: hidden;}
</style>

（3）内墙法。代码如下：

<div class="father"><div class="son1">son1</div><div class="son2">son2</div><div class="son3">son3</div><!-- 这个div是专门用来清除浮动造成的影响的 --><!-- clear: both; 用来清除浮动对兄弟元素造成的影响 --><div style="clear: both;"></div>
</div>

（4）伪元素法。用的最多的一种方法：

<style>
/* 创建一个伪元素  ::after表示在father内部的最后面创建一个元素这个元素就是一个伪元素 */
.father::after{content: "";display: block;clear: both;/* 通常还会加上下面的代码 */font-size: 0;height: 0;/* 是否可见 hidden表示不可见*/visibility: hidden;}
</style>

也可以将清除影响的代码封装成一个类，这样，不管是哪一个元素受影响了，只需要在这个元素上加上这个类名就OK了

<style>.clearFix::after{content: "";display: block;clear: both;font-size: 0;height: 0;visibility: hidden;}
</style>

2.对兄弟元素造成的影响

在一个父元素中，如果box1，box2，box3,都浮动了，没有浮动的box4就会钻上去。

解决方法

clear本意就是清除的意思。
clear:left; 清除左浮动造成的影响
clear:right; 清除右浮动造成的影响 盒子的右浮动使用的并不多
clear:both; 清除左右浮动造成的影响
哪个兄弟受影响了，就需要把这个clear:both写在哪个兄弟上面。

<div style="clear:both;width: 80px;height: 80px; background-color: orange;">box4</div>

四、浮动元素的特性

  1. 贴靠性。一堆浮动的元素，会彼此的贴靠。
  2. 如果父元素宽度变小了，儿子还会具有贴靠性，直到所有的浮动元素贴到父元素的边框。
  3. 如果一个元素浮动了，它也不可能浮动到父元素外面。
  4. 一个元素浮动了，它会自动地“变性”，变成人妖了。女盒子变人妖盒子，男盒子也变。
  5. 浮动元素它是半脱离标准文档流，证明：字围效果。
  6. 在一个父元素中，所有的子元素都浮动了，会造成父元素的高度塌陷。此时，如果父元素也浮动了，高度就不塌陷。（因为浮动的元素会形成BFC）。
  7. 如果一个元素浮动了，就不能使用margin:0 auto; 让一个盒子水平居中了。

CSS的三大布局方式（流式布局，浮动布局和层布局）相关推荐

  1. 移动端常见布局方式(流式布局、flex弹性布局、less+rem+媒体查询、Bootstrap)

    目录 一:移动端页面 1.流式布局(百分比布局) 2.flex弹性布局(重点♥) flex布局初体验: flex布局原理: flex布局父项常见属性 flex-direction 设置主轴的方向 ♥ ...

  2. CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别

    原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍前端的 ...

  3. 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

    静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

  4. 46、Flutter之 布局组件 流式布局Wrap，Flow

    Row 和 Colum 如果子 widget 超出屏幕范围,则会报溢出错误,如: Row(children: <Widget>[Text("xxx"*100)], ); ...

  5. 静态布局、流式布局、自适应布局、弹性布局、响应式布局

    静态布局.流式布局.自适应布局.弹性布局.响应式布局 前端的布局主要有: 静态布局.流式布局.自适应布局.弹性布局.响应式布局等. 一.静态布局: 尺寸上一律使用px;同时限制外层容器的大小:中间的宽 ...

  6. 安卓自定义布局显示流式搜索记录

    安卓自定义布局显示流式搜索记录 老规矩,先上效果图(环境:API 30 , AS 4.0) OKK,开始动手! 第一步:自定义流式布局 XFlowLayout ,继承ViewGroup,然后重写 on ...

  7. 【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

    文章目录 一.Banner 栏样式及核心要点 1.实现效果 2.核心要点分析 二.完整代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果 一.Banner 栏样式及核心要点 1.实现效果 ...

  8. 两栏布局，三栏布局，等高布局，流式布局

    读前笑一笑: 我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办-? 她淡淡的回了句:"我就脱了上衣,然后说,别激动,是自己人"--自己人--己人-人- 两栏布局: 1. ...

  9. css-适配布局类型-流式布局-响应式布局

    制作手机界面时,一般按照2倍的大小去做. 如果设备的宽度大于显示的宽度,可以做一个适配 流体布局 来个例子,体验 代码 PC端可适配 移动端 电脑,与移动端都可正常显示 假设,给每一个a标签加上了边框 ...

  10. Android自定义组合布局,Android 流式布局 + 自定义组合控件

    自定义组合控件 package yanjupeng.bawei.com.day09.two; import android.content.Context; import android.util.A ...

最新文章

  1. ERP与GMP结合在药类企业实施及应用
  2. 2018年08月19日发烧诸事记
  3. spring Transaction Propagation 事务传播
  4. 联想Ideapad 710S-13IKB笔记本安装win10系统不认硬盘解决方法
  5. Docker - Compose 使用说明、详解docker-compose
  6. Linux常用命令~~~
  7. springboot 集成redis_一文详解Spring Boot 集成 Redis
  8. 国外自由车流ETC电子收费系统集成技术发展状况
  9. Windows下搭建elasticsearch集群案例
  10. 4.XXE (XML External Entity Injection)
  11. 转载：HTML5及移动端BUG
  12. 三次握手与accept()函数
  13. 深入理解for循环（执行顺序）
  14. Oracle Ravello的学习资料
  15. windows网络编程 gethostbyname()
  16. OpenWrt无线AP+STA配置
  17. 常微分方程在计算机的应用,简述计算机数学软件在常微分方程中的应用
  18. Android手势密码解锁
  19. 分享Silverlight/WPF/Windows Phone一周学习导读(06月06日-06月11日)
  20. 【Pytorch基础教程34】EGES召回模型

热门文章

  1. Android仿微信语音聊天界面设计
  2. Kali渗透测试之DVWA系列2——Brute Force(暴力破解)
  3. 参加一建等执业考试的复习准备要点
  4. 32. 从上到下打印二叉树 Ⅰ
  5. Android_Animation动画
  6. 获取节假日信息（来源国务院）
  7. 优盘不认，无法识别的情况下，如何修复问题
  8. Python散点图拟合
  9. 常用测试用例设计方法之判定表法详解
  10. Mysql多对多查询