浮动(float):浮动原先设定时主要是用于文本环绕图像设定的,后来发现其在css布局中有很大的帮助,故渐渐使用浮动。

浮动后的元素脱离了文档的普通流,使得浮动的元素不占据文档的位置,其他元素可以覆盖其位置。

浮动元素不影响块框元级元素布局,但是可以影响内联元素(主要是文本)布局。(即浮动元素不占据文档流位置,不影响其他元素布局,但是浮动元素的内联元素如:文本等会改变其布局)

如图:块1浮动,块2 没有浮动,其位置在块一处(被覆盖:浮动元素不占据文档流位置),但是其内联的文本却在其原本的位置(浮动元素的内联元素布局改变)。

浮动的文本环绕:文本的位置会占据#A的位置,但是其文本会始终环绕在浮动元素A附件。

  1. #A {
  2. float:left;
  3. width:200px;
  4. height:200px;
  5. background:#C00;
  6. }
  7. #B {
  8. width:480px;
  9. height:230px;
  10. 10.     background:#000;

浮动的弊端(高度塌陷):  如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候,那么它的高度就会踏缩为零。

浮动的删除:1.clear:both  ----如果浮动较多,会有很多<div class=’clear’></div>

2.在容器中使用overflow:auto或者hidden

3.给浮动的容器也添加浮动 float -------这样会使容器也带有浮动,影响整体布局

4.使用伪类元素 :after  在其容器中添加新样式 -------推荐使用,可复用性高

<div class="container clearfix">
        <div class="block1"><span>块1</span></div>
        <div class="block2"><span>块2</span></div>
        <div class="block3"><span>块3</span></div>
    </div>

.clearfix:after{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

float 浮动详解的更多相关文章

  1. mysql float类型详解

    mysql float类型详解float类型长度必须设置3以上 不然会报错 out of range如果设置3 就只是 整数+小数的长度 比方说3.23 3.2等等 3.333就不行了 4位了

  2. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  3. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  4. CSS系列 (05):浮动详解

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...

  5. 彻底理解浮动float CSS浮动详解 清除浮动的方法

    我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 ...

  6. CSS基础之浮动属性float图文详解

      宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”.   标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:超脱 ...

  7. CSS3定位和浮动详解

    本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下 一.定位 1. css定位: 改变元素在页面上的位置 2. css定位机制: 普通流: 浮动: 绝对布局: 3. cs ...

  8. float属性详解

    内容: 1.block与inline复习 2.float介绍 3.float作用 4.清除浮动 1.block与inline复习 1 block元素是独立的一块,独占一行 2 多个block元素会各自 ...

  9. css float属性详解

    定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非 ...

随机推荐

  1. java环境下wsimport编译Wsdl

    使用命令提示符进行操作:首先CD至java jdk/bin目录下.先bin目录下执行以下命令即可: -----------------------------服务需求放置的位置------------ ...

  2. sublime介绍常用插件和快捷键

    简介 Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来的,它最初被设计为一个具有丰富扩展功能的Vim. 是一个跨平台的编辑器,同时支持Windows.Linux.M ...

  3. Design Pattern ->Bridge

    Layering & Contract Philosophy With additional indirection. class CWindowImp { public: virtual v ...

  4. ASP.NET MVC 音乐商店 - 1 创建项目

    我们的项目从在 Visual Studio 中的文件菜单中选择“新建”,选择“项目”开始. 然后,选择 C# 中的 Web 模板组,在右边的项目模板中选择 ASP.NET MVC3 Web 应用程序, ...

  5. 关于Android Studio中的一个小问题——R文件引用Id失败

    错误情况: 今天使用AS建立了一个新的EmptyProject,结果出现错误 setContentView(R.layout.activity_main); R文件的引用Id失败.真的是莫名奇妙... ...

  6. 【起航计划 028】2015 起航计划 Android APIDemo的魔鬼步伐 27 App->Preferences->Launching preferences 其他activity获取Preference中的值

    前给例子介绍了如何使用PreferenceActivity 来显示修改应用偏好,用户对Preferences的修改自动存储在应用对应的Shared Preferences中. 本例介绍了如何从一个Ac ...

  7. Struts2_HelloWorld_7_1

    大致了解应用的运行过程: 由请求路径开始,浏览器端通过URL向tomcat发送http请求(如:http://localhost:8080/Struts2_0100_Introduction/hell ...

  8. 《spring技术内幕》读书笔记(1)——什么是POJO模式

    今天在看<spring技术内幕>,第一章中多次提到了使用POJO来完成开发,就百度了一下,在此保留 1.     什么是POJO POJO的名称有多种,pure old java obje ...

  9. 前端怎样学习react

    这是一个很长的话题.....慢慢写

  10. DEEP LEARNING 大满贯课程表

    Reinforcement Learning post by ISH GIRWAN Courses/Tutorials Deep Reinforcement Learning, Spring 2017 ...