重新开始学前端之浮动

重新开始学前端之浮动

css html5javascript

 阅读约 6 分钟

寒假来了, 打算重新学习总结前端的知识要点以及前端领域出现的新东西，因此有了这个系列。更多内容可以去我的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...

转自 https://segmentfault.com/a/1190000012789612