CSS浮动

Mxne2023-01-202023-04-29

传统网页布局方式

网页布局的本质——用 CSS 来摆放盒子，把盒子放到相应位置

标准流，就是标签按照规定好的默认方式排列。

标准流是最基本的布局方式。

以上三种方式都是来摆放盒子的，盒子摆到合适位置，布局自然就完成了。

实际开发中，一个页面基本包含三种布局方式。

很多布局效果，标准流没办法完成，此时就可以利用浮动完成布局。浮动可以改变元素标签默认排列方式。如让多个块级元素一行显示。

网页布局第一准则：多个块级元素纵向排列找 标准流，多个块级元素横向排列找浮动。

网页布局第二准则：先设置盒子大小，再设置盒子位置。

/*
none	元素不浮动
left	元素向左浮动
right	元素向右浮动
*/
选择器 { float: 属性值; }

浮动元素会脱离标准流，移动到指定位置（脱标）；浮动的盒子 不占位置，会漂浮在文档流的盒子上面（浮在空中，不占位置）
如果多个盒子都设置了浮动，则它们会按照属性值 一行显示 并且 顶端对齐排列。浮动的元素是相互贴在一起的（盒子间没有间隙），若父级 宽度放不下盒子，多出的盒子会 另起一行对齐。
浮动的元素会 具有行内块元素的特性，任何元素都可以浮动，增加浮动后具有行内块元素相似特性。如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

浮动元素经常和标准流父级元素搭配使用：先用标准流父元素上下排列位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。（大盒子束约小盒子）

未完待续…

为什么要清楚浮动：由于父级盒子很多情况下，不方便给高度，当时盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的盒子，对后面元素排版产生影响。

/*
属性值
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右两侧浮动
*/
选择器: {
  clear: 属性值;
}

额外标签法是在最后一个 浮动元素末尾 添加一个 空块级元素，给其赋以属性 clear:both;

给父级添加 overflow 属性，将其属性设置为 hidden、auto或scroll。

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /*IE6、7专有*/
  *zoom: 1;
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}