浮动

浮动的概念

  • 什么是浮动,他在css中占据什么样的位置

    • 网页布局的核心,就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置?

      • 在css中有三种方式来定位位置

        1. 普通文档标准流方式 (默认方式)
        2. 浮动流方式 (飘浮)
        3. 定位方式

    • 在这之中我们讲到的是div浮动方式,元素的浮动顾名思义就是可以飘浮起来的东西,设置了浮动属性的元素会脱离标准流的控制,移动到其父元素中指定的位置。
  • 为什么有浮动?他有什么作用,他的优势和劣势是什么?
    • 为什么有浮动

      • 浮动在网页中一开始的作用不大,用来实现文字在图片四周达到文字环绕的效果,既然是有用处的自然他就出现了,之后 慢慢的发现浮动很有意思,可以使块元素一行显示,就把更多的功能作用在了页面布局上了

    • 优势
      • 使得布局的方式 更加多样化适用于自定义布局
    • 劣势
      • 因为浮动的原因,该元素盒子是飘浮在其他标准流盒子之上的

CSS浮动属性float详解

  • 浮动的几个属性值有那些?他的作用是什么

    * 选择器:{声明(属性(float):属性值);}
属性值 作用
left 元素盒子左浮动
right 元素盒子右浮动
none 元素盒子没有使用浮动(默认值)

CSS浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三个盒子使用浮动来实现并排效果</title>
<style>
div{
float: left;
width: 200px;
height: 200px;
text-align: center; }
div::after{
content: "";
line-height: 200px;
}
.box1{
background-color: aqua;
}
.box2{
background-color: red;
}
.box3{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"> box 1</div>
<div class="box2"> box 2</div>
<div class="box3"> box 3</div>
</body>
</html>

CSS浮动清除

  • 清除浮动的属性:clear;
属性值 作用
left 元素盒子清除左浮动(需要给清除浮动的第一个最左边的盒子添加clear:left清除左浮动)
right 元素盒子清除左浮动(需要给清除浮动的第一个最右边的盒子添加clear:right)
both 所有元素盒子清除(需要作用在要清除的浮动元素最下面)

如果有用浮动,就应该尽量清除浮动

就好比人生苦短,有始有终

世间的繁华,只能一生去观望

美好的愿望,只能一世去实现

一世一轮回

  • 为什么要清除浮动?

    • 前面也有说过,因为原本浮动是用来做字体图片排版的,之后用来做div布局,必定会有一些不兼容的问题需要解决,虽然是一个缺点,但是不能说浮动元素不好用吧

清除浮动的几种方法

  1. 给浮动的最后一个标签再额外加上一个标签给上clear:both属性

    • 优点: 通俗易懂,书写方便
    • 缺点: 添加许多无意义的标签,结构化较差。
  2. 第一种方式的升级版:通过给高度塌陷的元素添加 :after 伪类元素 相当于在所右子元素浮动元素的最后面添加了一个标签,加上clear:both;优点也体现出来了
    • 优点: 符合闭合浮动思想 结构语义化正确
    • 缺点: 由于IE低版本浏览器ie7以下不支持:after伪类元素,但是可以通过添加zoom:1来做ie的兼容
  3. 给父级元素添加overflow属性方法
    • 可以通过触发BFC的方式来实现清除浮动效果。
    • 可以给父级添加: overflow为 hidden|auto|scroll 都可以实现。
    • 注意:none不可以,他不会触发BFC
      • 优点: 代码简洁
      • 缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素和如果使用auto和scroll会出现滚动条,一般情况下是不需要滚动条的。

通用 万能清浮法

该方法是最兼容的方法了,几乎解决了所有会出现版本问题的方式

	.clearAll{
zoom:1; /*因为伪类元素在ie7及以下不兼容的兼容方法*/
}
.clearAll:after{
center:"";
display:block; /* 设置块元素,这样他不会和元素并排,而是最后一个浮动元素的下面*/
clear:both; /* 清除浮动 上面的三个都要有,缺一不可,下面是解决兼容问题*/
overflow:hidden; /*再加上一层保障,就万无一失了*/
visibility:hidden; /*把这个伪元素彻底隐藏,但是他还是存在*/
height:0; /*给这个伪元素加上高度,这样他就算在center里面写内容也不显示*/
}

高度塌陷的产生条件

  • 产生条件

    • 父级元素因为子级浮动引起内部高度为0 产生的高度塌陷
  • 解决方法
    1. 给父元素加固定高度,使父元素自己撑开
    2. 给父元素触发BFC来实现父元素被子元素撑开效果

基础又重要的浮动(float)的更多相关文章

  1. CSS浮动(float,clear)通俗讲解

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  2. 经验分享:CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  3. 【html】【6】div浮动float

    我想 当看完上面的必看链接,拥有一定的基础后也得7天左右, 记住 一定要看完,知道它都有什么,没学会不要紧,哪怕只是有个简单的概念也行, 随着后续的使用慢慢深入学习,现在开始div布局. 必看参考: ...

  4. 经验分享:CSS浮动(float,clear)通俗讲解(转载)

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  5. 经验分享:CSS浮动(float,clear)通俗讲解 太棒了,清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  6. (转)经验分享:CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  7. css浮动--float/clear通俗讲解(转载)

    本文为转载 (出处:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html) 教程开始: 首先要知道,div是块级元素,在页面 ...

  8. (转)经验分享:CSS浮动(float,clear)通俗讲解

    文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身 ...

  9. 【转】CSS浮动(float,clear)通俗讲解

    作者:杨元 本文链接:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑, ...

  10. 验分享:CSS浮动(float,clear)通俗讲解

    经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...

随机推荐

  1. mysql only_full_group_by

    下载安装的是最新版的mysql5.7.x版本,默认是开启了 only_full_group_by 模式的,但开启这个模式后,原先的 group by 语句就报错,然后又把它移除了. 一旦开启 only ...

  2. maven tomcat 自动部署配置

    1:Tomacat 配置 /tomcat-users.xml 添加如下: <role rolename="manager-gui"/> <role rolenam ...

  3. TPO3-2Deletion of Ogallala Aquifer

    In the face of the upcoming water supply crisis, a number of grandiose schemes have been developed t ...

  4. Gitbook在 Mac 环境上的安装及使用

    一.在 Mac 环境上搭建 gitbook #.安装node.js,在node.js官网下载,直接安装稳定版本. https://nodejs.org/en/ #.检测 node.js 是否安装成功 ...

  5. 【网络流+贪心】Homework

    题目描述 Taro is a student of Ibaraki College of Prominent Computing. In this semester, he takes two cou ...

  6. 树分治(挑战p360)

    poj1741 题:http://poj.org/problem?id=1741 #include<iostream> #include<algorithm> #include ...

  7. mac用python读取文件常见问题(未完成)

    python读取文件常见问题(mac版) 让python的默认编码,和文件的编码保持一致

  8. PAT甲级——1050 String Subtraction

    1050 String Subtraction Given two strings S​1​​ and S​2​​, S=S​1​​−S​2​​ is defined to be the remain ...

  9. 回归分析|r^2|Se|变差|多重相关系数|决定系数|多重共线性|容忍度|VIF|forward selection|backward elimination|stepwise regression procedure|best-subset approach|回归方程的置信区间|预测区间|残差分析|虚拟变量

    应用统计学-回归分析 拟合度使用r^2和Se来检验. 显著性检验中,对于线性model使用ANOVA,对于单独的回归系数使用t检验. 最小二乘法.贝叶斯和最大似然都可用于求回归参数,最小二乘法是最小化 ...

  10. 通俗易懂JSONP讲解

    原文地址:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html JSON的格式或者叫规则: JSON能够 ...