03你认真学了css？浮动+定位

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 2,865 | 阅读时长 ≈ 10

自我总结：

浮动是实现布局的一种常见方式

浮动脱离普通文档流，即页面渲染时，盒模型按标准会将父元素所设置的属性将页面撑开；加入浮动后，父元素不会发现浮动元素，父元素则不会被浮动元素撑开页面）。 块级元素默认样式可以撑满父容器，加入浮动后，块级元素浮动则会收缩到内容本身的宽度。 加入浮动后，在父元素中看不见浮动元素，在行内元素看得见浮动，如文本或其他行内元素都会环绕浮动元素。

加入浮动后，浮动盒会向左或向右移动，直到其外边挨到包含块边沿或者另一个浮动盒的外边。 当同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面； 当反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下。 当浮动盒的宽度不一样时，紧跟后面的另一浮动盒则会出现卡住的现象。

加入浮动后，块级元素内容宽度会缩短，呈现inline-block的特性，放不下会换行；行内元素则以块级元素特性呈现，可以设置width、height、margin。

一、浮动：

1、从实践尝试到理论定义

（1）例子1：放不下会换行
一个浮动盒会向左或向右移动，直到其外边（outerEdge）挨到包含块边沿或者另一个浮动盒的外边。如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了
image
（2）例子2：被卡住
高度不一样，即出现一个卡住的问题
image
（3）例子3：文本被缩短下移
注： 未设置样式的块级元素，即有默认样式，margin-top(or bottom);
因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的块盒会竖直排列，就像浮动不存在一样。接着，浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的 margin box 让出空间。

例子：如一个普通元素（如p）遇到浮动元素之后，普通元素（如p）看不见这个浮动元素，但这个普通元素里的行盒（文字生成的行盒特性）能看到该浮动元素。当浮动盒宽度变化，文字行盒也会相应地被挤下去换行。
image

2、从理论到实现效果

（1）浮动元素脱离普通流？
A、普通流是什么？
页面渲染时，遵循“块级元素占据一行，行内元素一行水平排列占据它自身宽度，再来块级元素素依次向下排列”规律，并且这些元素从上到下，从左到右会将父元素所展示的页面撑开。
B、脱离普通流：
父元素计算宽高的时候，发现不了浮动元素。一旦有浮动元素，块级元素不会按照“从上到下，从左到右”的顺序去展示页面，块级元素会收缩内容宽度（呈现inline-block的特性），那么，父容器不会被里面的浮动元素撑开；
行内元素则会能看见浮动元素，如文本或其他行内元素则会环绕浮动元素。
例子：脱离普通流？！
块盒看不见浮动的 box1，但我是文本我能看见

（2）小结：

注： 块级元素默认样式可以撑满父容器，块级元素浮动则会收缩到内容的本身的宽度。如：

1
2
3
4
.box{
    float: left;
    background: red;
  }

注： 行内元素能发现浮动元素，如设置float或者position元素属性，便有了块级元素的特性，可以设置宽高。

1
2
3
4
5
6
7
span{
    float: left;
    background: blue;
    width: 100px;
    height: 50px;
    margin: 10px;
  };

（3）注： 脱离普通流？！VS abosolute

3、浮动的使用场景

（1）两栏布局
特指一侧是固定宽度，另一侧是自适应（用margin间隔来表示自适应的作用，是因为普通的块级元素会充满整个页面）
左侧固定宽度，右侧自适应 （反之，也可以）

（2）三栏布局
指两侧宽度固定，中间内容区块自适应
简单的三栏布局
注： 注意html结构顺序，即按照class为menu——aside——main的div元素顺序写法
当一个浮动盒按照设置实现左浮动时，另一个浮动元素设置为右浮，此时这个右浮，即相对于同级元素的高度进行右浮（除非页面放不下被挤下移除外）。

（3）导航条
list-style:none; float：left(or right); margin-left:XXpx;

4、清除浮动

（1）为什么要清除浮动？
虽然浮动是一种实现布局的方式，但是浮动在父元素中看不见。一旦在元素标签内加入了浮动，浮动脱离了普通流，在页面渲染时并不会按照html结构的计算规则，浮动元素会导致父元素所设置的页面无法撑开，浮动甚至会让浮动的效果叠放在页面某些元素效果上。所以必要时，需要清除浮动，这也是浮动实现布局的重要一环。
从浮动具有副作用说起：
问题A：对后续元素位置产生影响
问题B：父容器告诉计算出现问题
（2）clear:left;?
例子：clear:left?

  • clear:left;：要求该盒的top
    border边位于源文档中在此之前的元素形成的所有左浮动盒的bottom外边下方
  • clear: right;:要求该盒的top
    border边位于源文档中在此之前的元素形成的所有右浮动盒的bottom外边下方

即：box2设置clear:right有效吗?有
image
image

（3）清除浮动的两大副作用
对应问题B：父容器告诉计算出现问题
image

【重点】由于浮动在父容器中不能被发现，但要解决父容器（或页面）撑开的问题，我们必须在浮动和父容器（或者浮动元素）共存时寻找到一种解决方法。即在带有浮动属性的父元素标签中添加class为clearfix，关于伪元素属性::after （或::before）的固定代码样式，伪元素清除浮动法（IE8以上使用）：

1
2
3
4
5
6
7
8
9
.clearfix::after {
  content:'';
  display: block;
  clear: both;
}
/*或触发ie6的属性*/
.clearfix {
  *zoom:1;
}

设置一个普通元素内不具有浮动的属性参数，即float：none;和clear: left; 即可将完成clear:left;的效果【注意：应注重css元素的权重，以免报错】或【解决方法：】

（4）总结
实现一个水平布局

  • 方法1：设置display：inline-block;，注意缝隙和上对其的问题
  • 方法2：加入浮动，用clearfix的固定代码包裹解决父元素撑开页面的问题

二、定位

1、什么是定位？

（1）先了解正常/文档流（Normal Flow）是什么
Normal Flow即浏览器默认的文档布局方式。一旦添加了浮动和定位，脱离文档流之后，页面布局的规则发生变化。

（2）定位
通过设置position属性来覆盖默认的布局样式。即元素添加position和对应的属性值，它则会脱离了文档流。
position，让一个元素的位置在以前的基础上产生变动。（考虑：相对于谁和属性值）

2、定位的类型

（1）静态定位 ：
position: static;:默认值 默认的布局方式。
（2）相对定位：相对于自身的位置
position: relative;:相对默认的布局位置进行定位。
相对定位偏移前
相对定位偏移后1
相对定位偏移后2
注： left和top只对position:absolution/relative/fixed;生效
所谓的相对定位，是针对移动的元素自身，相对于它本身原先位置做了对应位置的偏移。但它所占用的文档流位置大小是没有变的。

（3）绝对定位：相对于父元素位置
position: absolute; 绝对定位元素脱离正常文档流，相对其定位上下文（Positioning Context）进行定位。 即页面上的正常元素看不见该绝对定位元素。但页面上绝对定位常覆盖其他元素。多个绝对定位元素存在页面，它们之间的绝对定位也相互看不见，产生重叠现象。

寻找页面中一个元素绝对位置，可以先设置该元素绝对定位：position: absolute;
image

然后先从它的父元素中进行相对定位：position: relative; 中确定该元素的绝对定位；
image
如果没有此绝对定位，再从它的父元素的父元素（如body）里的位置找；如果没有，则根据html的根节点作为参考。

总结： 使用绝对定位时，设置好参考点，一般，绝对定位的参考点为元素父容器
如一个元素设置了position：absolute；，那么它的父容器则设置position：relative；

注： 元素中使用了position：absolute;，就像浮动一样有了一些特性：

A、加入绝对定位后，宽度收缩
image
B、加入绝对定位后，行内元素呈现快接的特性，可以添加宽高
image
（4）z-index
由于使用绝对定位之后，产生元素覆盖的问题，z-index可以解决元素之间覆盖顺序的问题,，设置它的层叠顺序。如：
image
（5）固定定位
position: fixed; 相对浏览器窗口进行定位。
如“回到顶部”、“内容变固定窗口不变”等效果。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。

1
2
3
4
5
.feedback {
  right: 30px;
  bottom: 30px;
  position: fixed;
}

（6）粘性定位（兼容性差）
position: sticky;是相对定位和固定定位的结合。
默认情况下表现为相对定位，当浏览器窗口顶端与元素的距离等于 top 属性的值时，转变为固定定位。
如：image

三、浮动和定位——解决的一些问题

1、BFC和浮动

2、浮动和负边距

两个浮动元素，如果因放不下导致其中一个下移，对下移的元素设置负 margin值大于自身的宽度可将其上移
如：
image
image

3、用inline-block;还是浮动

（1）inline-block;

  • 优势: 不需要清除浮动，简单，在设置居中时更方便,适合子内容不多的元素水平排列
  • 劣势: 需要注意缝隙，注意对齐，ie8以下不能用

（2）float

  • 优势: 兼容性好，没缝隙问题
  • 劣势: 需要清除浮动，适合稍大的布局

4、用定位还是浮动？

大布局、自适应用浮动；小元素、固定宽高用定位。具体要结合实际情况是关键。
如：image

-------------本文结束感谢您的阅读-------------