zoukankan      html  css  js  c++  java
  • CSS浮动布局详解

    在了解float之前,我们需要了解一个概念-标准文档流

    文档流是文档中可显示对象在排列时所占用的位置。而标准文档流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。标准流里面的限制非常多,导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高,就要使文档脱离标准流。

    CSS中有两种方法,使一个元素脱离标准文档流:

    (1)浮动

    (2)定位

    一、这里来了解第一种方法——浮动

    Float是CSS布局中使用非常多的一个属性。

    float取值:
    left 沿着父容器靠左排列。
    right 沿着父容器靠右排列。
    none 没有浮动

    现在有两个div,分别设置宽高。它们的效果如下:

     此时,给这两个div增加一个浮动属性float: left;,效果如下:

     这就是浮动的效果。此时,两个元素在容器左侧并排,使用float之后,可以设置宽度高度了。

    但是很重要的一个点就是:float浮动用于布局,可以达到靠左靠右的效果,但是,当使用完float浮动之后,一定要清除浮动,要不然很可能会造成父容器的高度坍塌。

    二、float特性详解:

    性质1:浮动的元素脱离文档流

     未添加float之前两个div上下排列,float属性让上图中的第一个<div>标签出现了浮动,于是这个标签在另外一个层面上进行排列。

     性质2:浮动的元素互相贴靠

    加浮动的元素,会脱离文档流,会沿着父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。

     

    上图显示 ,box3如果有足够空间,那么就会靠着box2号。如果没有足够的空间,那么会靠着box1。如果没有足够的空间,box3自己去贴容器左侧。box3贴左墙的时候,并不会往box1里面挤。

    性质3:一个浮动的元素,如果没有设置width,那么将自动收缩为内容的宽度

     div本身是块级元素,如果不设置widh,它会单独占整行;但是,设置float浮动后,width就有div的内容决定。

    float注意点 :只会影响后面的元素;内容默认提升半层;默认宽根据内容决定;换行排列,当容器放不下这些浮动元素的时候,就会换行排列;主要给块元素添加,但也可以给内联元素添加。

    By:逆战班伍延彬

     

     

  • 相关阅读:
    SilverLight入门实例(一)
    应聘成功了,要去沪江网上班啦!
    C#中(int)、int.Parse()、int.TryParse、Convert.ToInt32数据转换注意事项
    DataTable和DataSet什么区别
    SQL 通配符
    可以把 SQL 分为两个部分:数据操作语言 (DML) 和 数据定义语言 (DDL)
    发现jquery库的关键字冲突,造成了隐形BUG!(附代码)
    《转载》微软PostScirpt打印机驱动程序原理
    在应聘工作中,不知不觉的完成了一个比较困难的小项目
    在最新的Eclipse 3.6 上配置 Java ME 的开发环境!
  • 原文地址:https://www.cnblogs.com/wublogs/p/12354409.html
Copyright © 2011-2022 走看看