从新开始学前端之浮动

寒假来了, 打算从新学习总结前端的知识要点以及前端领域出现的新东西，所以有了这个系列。更多内容能够去个人github: https://github.com/SGAMERyu

1. 浮动

1.1 什么是浮动

Float是一个CSS定位属性, 要了解他的目的和起源, 咱们能够看看印刷设计, 在打印布局中, 能够将图像设置到页面中, 使得文本根据须要环绕他们。

;

而在页面中浮动是这样工做的: 浮动元素会脱离正常的文档布局流,并吸附在其父容器的左边/右边(float: left/right)。在正常布局下中位于该浮动元素之下的内容,此时会围绕着浮动元素。填满左侧或右侧的空间。

浮动元素仍然是网页流的一部分,这与使用绝对定位的页面不一样, 绝对定位的页面元素将从网页的布局流中移除。

1.2 浮动使用场景

除了图像环绕文字以外,浮动可用于建立整个网页布局

在较小的布局中,浮动对布局也颇有帮助, 若是咱们使用float应用到咱们的图像上,那么当图像改变大小时, 框中的文本将回流适应

一样的布局也能够经过容器上的相对定位和绝对定位来完成,这样作的话, 文本将不会受到化身的影响,而且不能在大小改变时从新排版

1.3 清除浮动

Float的相对属性是Clear, 一个拥有clear属性的元素, 并不向像浮动元素的方向移动,而是会在浮动元素的下方

在上面的例子中, slidebar像右浮动,比Main Content内容区域短,而后footer被移动到浮动所需的可用空间。要解决这个问题,咱们能够给footer元素设置清除浮动时

#footer {
  clear: both;
}

clear也有四个有效值, both是最经常使用的,清楚来自任意方向的浮动, left和right能够用来分别从一个方向清除浮动。

1.4 浮动问题

若是父元素只包含浮动的元素,那么他的高度就会塌陷。若是父元素不包含任何视觉明显的背景,并不会有什么问题。可是更难的是这种状况

<p>
 float before
 <span style="float:left">
<p>

<p>float after<p>

这样输写代码会形成这样的状况

这样使用浮动会在文本流中出现不天然的间隔中断。并且没有实际的方法来修复他

1.5 清除浮动的技巧

• 空div法: 在父元素中添加一个div,也能够是<br>元素获取其余元素。

<div style="clear:both">

• overflow: 在父元素上设置overflow属性，若是此属性设置为auto或者hidden则能够达到清除浮动的效果。但要注意overflow并非专门用于清除浮动。
• 伪元素法: 使用伪元素来清除浮动，也是目前经常使用的方法

.clearfix{
  zoom: 1;
  display: block;
}
.clearfix:after{
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

阅读原文: https://css-tricks.com/all-ab...