整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS中的浮动（Floats）、定位（Positioning）和显示（Display）属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景，帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。
浮动是CSS中用于实现元素排列的一种方式，它可以让元素脱离正常的文档流，并可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。
.element {
float: left; /* 或者 'right' */
}
.clear-element {
clear: both; /* 可以是 'left', 'right', 或 'both' */
}
定位属性允许你控制元素的位置，它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。
.element {
position: static | relative | absolute | fixed | sticky;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.absolute-element {
position: absolute;
top: 0;
right: 0;
}
.fixed-element {
position: fixed;
bottom: 0;
left: 0;
}
.sticky-element {
position: sticky;
top: 10px;
}
display属性是CSS中最重要的用于控制布局的属性之一，它定义了元素如何显示在页面上。
.element {
display: block | inline | inline-block | flex | grid | none;
}
.block-element {
display: block;
}
.inline-element {
display: inline;
}
.inline-block-element {
display: inline-block;
}
.flex-container {
display: flex;
}
.grid-container {
display: grid;
}
.hidden-element {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="navigation">Navigation</div>
</div>
<div class="main-content">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
<div class="fixed-element">Fixed Element</div>
</body>
</html>
/* Reset some default styles */
body, h1, p {
margin: 0;
padding: 0;
}
/* Header styles */
.header {
background-color: #f8f8f8;
border-bottom: 1px solid #e7e7e7;
padding: 10px;
overflow: hidden; /* Clearfix for floated elements */
}
.logo {
float: left;
font-size: 24px;
}
.navigation {
float: right;
font-size: 18px;
}
/* Main content styles */
.main-content {
padding: 20px;
}
.sidebar {
float: left;
width: 200px;
background-color: #ddd;
padding: 10px;
}
.content {
margin-left: 220px; /* Make space for the sidebar */
background-color: #eee;
padding: 10px;
}
/* Footer styles */
.footer {
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
text-align: center;
padding: 10px;
position: relative; /* For demonstration purposes */
top: 20px; /* Move the footer down a bit */
}
/* Fixed element styles */
.fixed-element {
position: fixed;
bottom: 10px;
right: 10px;
padding: 5px 10px;
background-color: #333;
color: #fff;
z-index: 1000; /* Ensure it stays on top */
}
/* Clearfix hack */
.clearfix::after {
content: "";
clear: both;
display: table;
}
在这个例子中，我们创建了一个包含头部、侧边栏、主要内容和页脚的基本布局。我们使用浮动来对齐头部的Logo和导航，以及创建一个侧边栏。我们还使用了相对定位来稍微下移页脚，并使用固定定位为页面添加了一个始终可见的固定元素。最后，我们使用了overflow: hidden;来清除头部中浮动元素的影响。
浮动、定位和显示属性是CSS中构建复杂布局的强大工具。通过深入理解和正确应用这些属性，前端工程师可以创建出既美观又功能强大的网页。随着Web标准的不断发展，我们也需要不断学习和适应新的CSS特性，以保持我们技能的前沿性。
喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！
志同道合的小伙伴跟我一起学习交流哦！
1 文档流介绍
浮动（ float）
普通流（ normal flow）也叫标准流、文档流
前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
CSS的定位机制有3种：普通流（标准流）、浮动和定位
htmi语言当中另外一个相当重要的概念——标准流！或者普通流，或者文档流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
2 浮动是用来做文字环绕效果的
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕图片的效果。
后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列因此我们就慢慢的偏离主题，用浮动的特性来布局了。（CSS3已经是我们真正意义上的网页布局，具体CSS3我们会详细解释）
3 体会浮动
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{ float：属性值；}
4 浮动就是漂浮的意思
浮动脱离标准流，不占位置，会影响标准流。可以盖住标准流。浮动只有左右浮动。
5 浮动首先需要添加标准流父级
浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。
6 浮动特性对齐父盒子
7 浮动特性盒子排列
浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
8 浮动影响盒子显示模式
元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。
浮动根据元素书写的位置来显示相应的浮动。
9 浮动总结
浮动的目的就是为了让多个块级元素同一行上显示。
float浮漏特（形象的表示）
浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。
特：特别注意，首先浮动的盒子需要和标准流的父级搭配使用，其次特别的注意浮动可以使元素显示模式体现为行内块特性。
10 版心和布局流程
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。
“版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960pX、980px、1000px、1200px等。
布局流程
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML页面，CSS文件。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
11 一列固定宽度且居中
12 两列左套右宽型
快捷生成框架：
按tab键即可生成如下框架：
13 通栏平均分布型
看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。
本章已结束，下篇文章将分享《12 清除浮动》小伙伴们不要错过哟！
. Float basics 浮动基础
在了解浮动之前，要先了解文档流。文档流是正式输出的流。元素在前面的元素先输出。元素写在后面的后输出。块级元素占满一行。内联元素按内容的大小占空间。且不占一行。文档流有别于浮动流。根据w3school规定，由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。如下：
这个黄色的框在左浮动后，他下面的文字p元素就上来了。（为什么上来，因为p元素忽视浮动框的存在。P是文档流。黄色框是浮动流。）这样，他和黄色框是在同一行。文字照顾到框的存在所以向后缩进。其实<p>是也占一行的。但是它忽视黄色框的存在。按正常的文档流输出。Float以前主要是用于文字环绕图片的效果。
注释： 所有元素属性中有float或者position：abselute后 这个元素输出就是浮动流。怎么浮动看第2条。个人这么理解：浮动元素跟着浮动元素走。不考虑文档流。
1. 什么是浮动？
浮动是指浮动一个元素。当你浮动一个元素后，他就会变成一个块级元素。而且浮动时元素只能浮动到同一行的左边或者右边。
浮动的盒子脱离文档流，然后飘到最左边或者最后边。（具体见下面的解释！）
2. Where will a floated element move to? 浮动元素怎么浮动！
Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.
浮动的元素到达 body元素的边框
或者 其父元素的边框或者到达另外一个浮动的边框。
If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.
译文：如果对于浮动元素来讲他所在的行没有足够的空间给他。他会移到下面的一行。下面的例子：黑盒子做float：left，黄色的做float：right。
3．当你浮动一个元素时，需要设置一个宽度。
4. 下面分析的是：一个元素在浮动元素的上面或者下面。
（重要的知识点：）★★★★★★★
第一：块级元素在上，飘的元素在下。块级元素不会受到影响。
第二：如果飘的元素在上，在他下面的元素讲会受他的影响，包围他。对于文字的话他会围绕飘的元素。但是其他块级元素，图片会伸展到其地下去。这个我从dreamweaver中已经也看到了。
看图：
如果你不想《p》元素上去了和黄色的框在同一行。可以用：清除浮动。
对p实行清除浮动。
处理这样的问题，可以对块级使用清除浮动。
规则如下：clear: left 、clear: right; clear:none;
如果你不想在浮动层下面的元素包围浮动层，你可以用清除浮动。
总结：一般元素浮动后，会空出自己的所有行。左边也好右边也好。
然后其他元素就会包围他。他需要清除自己的左边或者右边。就是表示他还是像以前那样占那么多行。比如图片占了那么多行。不让其他元素包围他。
要理解下面的现象：
上面的图片是由这个排列出来的。
Div4 因为第一行排不下去了，所以要下来。他这里有一个过程：先排到div3后面，因为排不下去了，后来就又飞到了div1的下面。因为div1高度高，把他给卡住啦。就出现了这样的情况。
基本概念：
Viewport是windows窗口的文档可见部分。
Initial containing block：是对于页面来讲的。指页面的总宽和长。
Containing box：指的是一个box。这个box带有其他元素，比如p，ul等元素。
Normal flow：文档的正常输出，如果没有float 或者position应用到这个元素。
*请认真填写需求信息，我们会在24小时内与您取得联系。
