浮动布局再续前缘

在这里插入图片描述
前要反思： 最近在写商城专题，有PC端和移动端！由于本人移动端写的页面比较多，一般都是使用弹性布局来适配不同分辨率的！所以我写PC端的时候也使用弹性布局+绝对定位来画页面的！但是在我电脑上正常，到了测试那边由于分辨率不一样出现了表单错位的现象！后来想到还有一个浮动布局，只不过我基本没有用过！说真的这次解决掉的适配还是浮动布局搞定的！所以要好好复习一下浮动布局！

相关属性介绍：

属性名：float
属性值：
1、向左浮动：left
2、向右浮动：right
3、默认值不浮动：none
4、继承父元素：inherit
目的：浮动布局的主要用法是为了让块级元素在一行中显示（列级布局），或者让文字在图片的周围显示。浮动元素用来解决块级元素在X轴上的排列问题ted
使用方法：浮动布局通常出现在div这种父子结构中，为子元素添加浮动特性
特点：（脱离文档流）当一个元元素是浮动元素的时候，他会失去对父元素的支撑
清除浮动：
1、给父元素添加overflow:hidden
2、使用伪元素例：clear:both(left、right)
3、如果没有指定宽度，宽度由内容所决定
4、多个浮动元素在一行排列，如果放不下再换行
5、不再占据屏幕空间

<body>
    <div class="main">
        <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
    </div>
   <div> hello</div>
</body>
1
2
3
4
5
6
7
8

 body{
   margin:0;
 }
 .one,.two,.three{
       width: 300px;
      height: 100px;
      float: left;
  }
  .one{
     background-color: blueviolet;
 }
 .two{
     background-color: deeppink;
 }
  .three{
      background-color: deepskyblue;
  }
  /*.main{
       overflow: hidden;
   }*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

<body>
    <div class="in">
        <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
    </div>
</body>
1
2
3
4
5
6
7

.one,.two,.three{
    width: 300px;
   height: 100px;   
}
.one{
    background-color: blueviolet;
}
.two{
     background-color: deeppink;
     float: right;
}
.three{
    background-color: deepskyblue;
    float: right;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述
一、固定布局
特征：不管浏览器窗口如何缩小放大以及电脑分辨率如何变化，其模块的大小随着浏览器窗口缩小放大而变化，随着窗口推动而固定不变被盖住！

<div class="container">
	<div class="wrap clearfix">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
</div>
1
2
3
4
5
6

.container {
	width: 600px;
	background-color: #DDF3F7;
}
.wrap {
	padding: 20px;
	overflow: hidden;
}
.box1 {
	float: left;
	width: 56px;
	background-color: red;
	height: 300px;
}
/* 固定布局写法 */
.box2 {
	float: right;
	width: 484px;
	background-color: green;
	height: 300px;
}
/*清除浮动造成的影响*/
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}
.clearfix {
	*zoom: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

100%正常窗口：
在这里插入图片描述
推动窗口：被盖住

窗口放大200%：

二、流体布局
特征：和固定布局基本一样的，只是第二个模块没有对应的浮动，直接距第一个模块脱离形成效果！

.container {
	width: 600px;
	background-color: #DDF3F7;
}
.wrap {
	padding: 20px;
	overflow: hidden;
}
.box1 {
	float: left;
	width: 56px;
	background-color: red;
	height: 300px;
}
/* 流体布局写法 */
.box2 {
	margin-left: 76px;
	background-color: green;
	height: 300px;
}
/*清除浮动造成的影响*/
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}
.clearfix {
	*zoom: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

三、浮动与两侧皆自适应的流体布局
特征：和固定布局基本一样的，只是里面的撑开是靠内容而定的，所以盒子一定得要有内容！

.container {
	width: 600px;
	background-color: #DDF3F7;
}
.wrap {
	padding: 20px;
	overflow: hidden;
}
/* 浮动与两侧皆自适应的流体布局写法*/
.box1 {
	float: left;
	margin-right: 20px;
	background-color: red;
	height: 300px;
}
.box2 {
	display: table-cell;
	*display: inline-block;
	width: auto;
	background-color: green;
}
/*清除浮动造成的影响*/
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}
.clearfix {
	*zoom: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这里插入图片描述
四、右浮动，改变DOM位置的流体布局
特征：和固定布局基本一样的，说白了就是流体布局倒过来而已！

.container {
	width: 600px;
	background-color: #DDF3F7;
}
.wrap {
	padding: 20px;
	overflow: hidden;
}
/* 浮动与两侧皆自适应的流体布局写法*/
.box1 {
	width: 56px;
	float: right;
	background-color: red;
	height: 300px;
}
.box2 {
	margin-right: 76px;
	background-color: green;
	height: 300px;
}
/*清除浮动造成的影响*/
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}
.clearfix {
	*zoom: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

总结
这几种方法中“浮动与两侧皆自适应的流体布局”为最佳，因为它自适应强，可以不需要设置左右盒子的宽度，根据盒子内容来确定它们的排版。微博中采用这种方式可以实现盒子中个人头像大小替换，替换的同时并不会破坏网页的排版。

相关阅读:
sshpass传输文件提示Host key verification failed.
一个全局最优化的方法：随机游走算法-Random-Walk
从Gamma空间改为Linear空间会导致性能下降吗
 Educational Codeforces Round 162(div2)||ABC
HTML入门教程23：HTML脚本
 干货 | 背熟这些 Docker 命令，面试再也不怕啦~
【知识积累】关于解决生产Limit导出重复数据的心路历程
 linux安装oracle jdk
Unity Mirror学习（二） Command特性使用
 Javaweb基础-前端工程化学习笔记
原文地址：https://blog.csdn.net/weixin_45788691/article/details/126555605