前端入门-day3(CSS中浮动和清除浮动)

googollee 发布于2019-08-29 17:05 / 2775人阅读

摘要：写在前面浮动是中一个相对比较麻烦的属性，与之伴随的通常是清除浮动。清除浮动因此，当我们用到了浮动，又不想出现这种情况的时候，就需要清除浮动。因此，注意浮动的使用场景，并且在需要的时候清除浮动，就可以很好的控制浮动啦

写在前面

浮动是CSS中一个相对比较麻烦的属性，与之伴随的通常是清除浮动。今天我们一起来搞定浮动。

常见的用法

事实上，当我们将一个元素设置成浮动时，达到的效果如下图：

这种版式相信大家都见过，很多杂志都会采用这种左边或者右边插图，文字环绕的效果。

另一种常见的浮动的用法如下图：

即在某一行内，使某一部分右对齐，通常不会用margin实现，而是使用浮动。

浮动带来的问题

浮动的元素无法撑开父元素，即导致高度坍塌！！

来看下面的例子：


  
  


.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}

当较大的方块浮动时，我们可以看到他无法撑开父元素。通常情况下这不是我们想要的结果，因为这会导致布局混乱。当父元素内的子元素全部浮动时尤其明显，父元素的高度会坍塌为0。

清除浮动

因此，当我们用到了浮动，又不想出现这种情况的时候，就需要清除浮动。

清除浮动的方式可能有很多种，但是现在比较流行，我个人比较喜欢的方式如下：

首先，添加以下CSS：

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

然后，在父容器上添加clearfix类，最后代码如下：


  
  


.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

得到的效果如下：

浮动的元素就可以撑开父容器的高度啦！

总结

浮动的元素无法撑开父容器的高度，所以需要清除浮动

浮动可以很简单的实现右对齐。

浮动可以很简单的实现文字环绕效果。

因此，注意浮动的使用场景，并且在需要的时候清除浮动，就可以很好的控制浮动啦~

混合云专线服务浮动-前端-css 清除浮动在html中怎么浮动 html浮动向上浮动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114092.html

CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
前端入门4-CSS属性样式表

摘要：正文属性样式表正文属性样式表了解了具体的各种工作原理使用方式选择器规则层叠算法等之后，那么该来学习的也就是都支持哪些属性样式表了。本篇文章已授权微信公众号 dasu_Android（大苏）独家发布声明本系列文章内容全部梳理自以下四个来源：《HTML5权威指南》《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白，入...

hss01248 2019-04-23 13:14 评论0 收藏0
【零基础入门】css学习笔记（6）清除浮动

摘要：清除浮动，为何要清除浮动浮动效果会带来不好的影响子元素浮动会带来父元素高度塌陷。，清除浮动的两大基本方式，运用清除浮动。元素流入页面时，在这个元素左边右边或两边不允许有浮动内容。除了是用来清除浮动的，其它代码都是为了隐藏掉生成的内容。清除浮动 1，为何要清除浮动浮动效果会带来不好的影响：子元素浮动会带来父元素高度塌陷。具体解释：当浮动框高度超出包含框时，包含框不会自动伸高来闭...

BingqiChen 2019-08-30 15:53 评论0 收藏0
深入css布局 (2) — 定位与浮动

摘要：深入布局定位与浮动在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。定位后，原来在文档流中占据的位置，会被其他元素所占据。清除浮动的特殊应用清除浮动可以解决父元素高度塌陷问题。深入css布局(2) — 定位与浮动在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深...

Crazy_Coder 2019-04-23 13:42 评论0 收藏0
CSS入门指南-2：盒子模型、浮动和清除

摘要：会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型，浮动和清除。这是CSS设计指南的读书笔记，用于加深学习效果。上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。盒子模型所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。可见的页面版式主要由三个属性...

ConardLi 2019-08-29 12:59 评论0 收藏0