CSS之轻松搞懂浮动与清除浮动（图文并茂）

Travis 发布于2019-08-29 18:44 / 1280人阅读

摘要：一浮动是什么属性定义元素在哪个方向浮动。元素不浮动，并会显示在其在文本中出现的位置。在左右两侧均不允许浮动元素。比如上面的例子，我们为加上，便可清除浮动。如下见证右浮动右浮动右浮动右浮动最后一个空到哪，的高度就到哪。

一、float（浮动）是什么

float 属性定义元素在哪个方向浮动。
float:left    元素向左浮动。
float:right     元素向右浮动。
float:none     默认值。元素不浮动，并会显示在其在文本中出现的位置。
float:inherit     规定应该从父元素继承 float 属性的值。

看一段简单的代码：

左浮动
右浮动
喵

  .child1 {
    float: left;
    height: 500px;
    width: 70%;
    background: #aa0;//黄
  }
  .child2 {
    float: right;
    height: 300px;
    width: 30%;
    background: #0aa;//青
  }
  .child3 {
    background: #a0a;//紫
  }

二、clear是什么

clear属性指定段落的左侧或右侧不允许浮动的元素。
clear:left     在左侧不允许浮动元素。
clear:right     在右侧不允许浮动元素。
clear:both     在左右两侧均不允许浮动元素。
clear:none     默认值。允许浮动元素出现在两侧。
clear:inherit     规定应该从父元素继承 clear 属性的值。

比如上面的例子，我们为child3加上clear: both;，便可清除浮动。（child3的左右两侧都不允许浮动元素，自然而然不会再跟在俩浮动元素的屁股后面了~）

那么，只在一侧不允许浮动是怎样的呢？
本来是酱紫的：

child1右浮动
child2右浮动
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...

  .child1 {
    float: right;
    background: #aa0;//黄
  }
  .child2 {
    float: right;
    background: #0aa;//青
  }

然后，为child2加上clear: right;，在child2的右侧不允许浮动元素，所以child2就飘到了下一行。

那么，为child1加上clear: left;的时候，为什么不起效果呢？在这留个小彩蛋，欢迎大家留言讨论~

三、浮动带来的影响

浮动带来的最大影响就是，当父元素只包含浮动的子元素的时候，父元素的高度就会塌陷（height变为0）。
像酱紫：（parent高度为0，无法显示粉色背景）


    child1右浮动
    child2右浮动


  .parent {
    background: #FBC;//粉
  }

四、清除浮动的方式

在父元素中的结尾加一个空div

原理：第二大点提到的clear属性

优点：浏览器支持好

缺点：如果页面浮动布局多，就要增加很多空div


  child1右浮动
  child2右浮动
  


  .child1 {
    float: right;
    background: #aa0;
  }
  .child2 {
    float: right;
    background: #0aa;
  }

可见，空div高度为0，位于父盒子的最下面，使父盒子重新撑起了应有的高度。
为什么要在最后加？倘若你在中间加，效果会是酱紫：

由于空div的左右都不允许浮动元素，那么它就会另起一段，导致盒子位置的效果就像child2清除右侧浮动一样，child2跑到了child1下方。

可为啥parent父盒子的高度是一个child1盒子的高度？
因为浮动元素会脱离标准文档流，元素“浮”在标准流之上。父盒子多高和child1、child2在哪里没关系，空div多“高”，父盒子就多“高”。
如下见证：


  child1右浮动
  
  child1右浮动
  
  child2右浮动
  
  child2右浮动

最后一个空div到哪，parent的高度就到哪。

在父元素设置overflow属性

原理：设置overflow:hidden或overflow:auto，浏览器会自动检查浮动区域高度（才能知道父框的内容有无溢出）

优点：浏览器支持好

缺点：子元素若超出父元素尺寸会被隐藏，或者父元素出现滚动条


  child1右浮动
  child2右浮动

当设置overflow:auto;时，父元素会出现滚动条：

伪元素

原理：类似设置clear属性

优点：浏览器支持好，普遍


  child1右浮动
  child2右浮动

  .clearfix{
    zoom: 1;    //zoom（IE专有属性）可解决ie6，ie7浮动问题
    display: block;
  }
  .clearfix:after {
    content: ".";    //content: "";也可
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }

完~若有不足，请多指教，不胜感激！欢迎路过的大侠讨论~

GPU服务器服务器托管清除浮动浮动-前端-css html浮动向上浮动上下浮动

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

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

前端笔记之CSS（下）浮动&BFC&定位&Hack

摘要：并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。宋体清除浮动这是专业术语，其实就是需要我们解决浮动带来的影响宋体父元素的高度塌陷宋体。相对定位的参考点是自身。一、浮动 1.1 各个语言的主要知识点 HTML：标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS：　　样式：　　布局：　　　　标准流(标准文档流、普通文档流)：盒子模型(width/height...

番茄西红柿 2019-04-23 11:44 评论0 收藏0
css魔幻属性跟进篇

摘要：中是这样定义的属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。其同样适用于设置属性为绝对定位或固定定位的内联元素。至于为什么，可以理解为内联元素没有盒模型，其高度由内容决定。白话：即上一篇我脑中飘来飘去的css魔幻属性自己的文章推出之后，这是自己写的第四篇CSS相关的文章，文章绝大部分是自己工作总结得来，另一部分是平日sf回答的与面试中向面试官交流学到的，都是一...

oogh 2019-08-30 14:16 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
css常见的各种布局上（两列布局）

摘要：目录一大结构上的导航栏和内容区域两栏布局博客园为例腾讯课堂个人中心页慕课网个人中心页个人中心页二版的结构三类似九宫格布局的两列结构四图文两列布局左图右文字非垂直居中，左图，右固定行数的文字，右侧文字和左边图片垂直居中。目录：一、大结构上的导航栏和内容区域两栏布局1、博客园为例2、腾讯课堂个人中心页3、慕课网个人中心页4、github个人中心页二、mini版的nav+cont结构三、类似九宫格...

番茄西红柿 2019-04-23 11:40 评论0 收藏0