CSS中float和Clear的使用

本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的float对象的边界,而紧随其后的非float对象或内容,则包围在其相反的方向。

CSS中Float和Clear属性用法

实现多栏排版的最好方法是使用float属性,float也是一个将使你受益匪浅的属性。一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的float对象的边界,而紧随其后的非float对象或内容,则包围在其相反的方向。

以下是使用float和clear属性的一些重要准则:

◆一个float对象,将从其置身的block级非float内容流中跳出,换句话说,如果你要将一个box向左边float,它后面的block级非float对象会显示到下方,inline级内容会在旁边包围

◆要让一段内容从一侧包围一个float对象,这段内容必须要么是inline级的,要么也设置为相同方向的float

◆一个float对象,如果没有设置宽度,则会自动缩成其包含的内容的宽度,因此最好为float对象明确设置宽度

◆一个设置了clear属性的对象,将不会包围其前面的float对象

◆一个既设置了clear又设置了float属性的对象,只有clear:left属性生效,clear:right不起作用

CSS clear 用法介紹

clear 是用來清除某一元素的側邊浮動元素,假設兩個 div 區塊使用了浮動(CSS float)而併排在一起,如果要讓這兩個元素不要併排在一起,則可以使用 clear 來宣告清除 CSS float 浮動效果,以下範例圖片所示。

左邊藍色區塊與右邊綠色的區塊,我們使用了 float 讓左右兩的區塊可以水平排在一起,如果你不需要綠色區塊浮動在藍色區塊的右邊,這時候可以在綠色區塊的 style 加上 clear:left 這樣的寫法,意思是清空綠色區塊左邊的浮動區塊,呈現效果就會像下方這樣。

當綠色區塊用 clear 清除掉左邊的浮動區塊之後,等於是讓 float:left 失效,就自然而然的往下方排列囉!
CSS clear 語法範例

box {  float:left;  clear:left; }

此範例的意思是清除 box 區塊左方的浮動元素。
CSS clear 可以的值有 left(清除左邊浮動區塊)、right(清除右邊浮動區塊)、both(清除兩邊浮動區塊)、none(預設就是這個,兩邊都可以有浮動區塊)最後還有 inherit(繼承),但是因為 IE 支援度的原因,所以我沒在使用  inherit 這個值

CSS中float和Clear的使用的更多相关文章

  1. 转: CSS中float和clear的理解

    float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">1111 ...

  2. CSS的float与clear

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

  3. 关于css中float的理解

    感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...

  4. 解决CSS中float:left后需要clear:both清空的繁琐步骤(转)

      之前,因为公司专门有CSS+DIV的切片设计师,所以我一直都是注重程序的设计与开发.现在,因为接了一些Web网站的项目需要制作,就在空闲时间学习起了CSS.Jquery. 现在,大部分的横排导航都 ...

  5. CSS中float属性和clear属性的一些笔记

    在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定 ...

  6. 解决CSS中float:left后需要clear:both清空

    现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对 ...

  7. 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  8. css中float left与float right的使用说明

    转自:http://www.jb51.net/css/33740.html   脚本之家 No! 要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block( ...

  9. CSS中float属性

    这个东西叫浮动.顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流.正常情况下,HTML页面中块元素都是从上倒下排列的.如果想实现左右结构.float的一种选择(当然还有其他方法). ...

随机推荐

  1. 《FDTD electromagnetic field using MATLAB》读书笔记之一阶、二阶偏导数差商近似

  2. java编程之常见的排序算法

    java常见的排序算法 第一种:插入排序 直接插入排序 1, 直接插入排序 (1)基本思想:在要排序的一组数中,假设前面(n-1)[n>=2] 个数已经是排 好顺序的,现在要把第n个数插到前面的 ...

  3. ACM学习历程—HDU2476 String painter(动态规划)

    http://acm.hdu.edu.cn/showproblem.php?pid=2476 题目大意是给定一个起始串和一个目标串,然后每次可以将某一段区间染成一种字符,问从起始串到目标串最少需要染多 ...

  4. java中读取配置文件

    若是Javaweb项目,项目运行于tomcat或其他容器时,可以使用下面方式来获取文件的输入流 1.当属性文件放在src下面时 InputStream is = Thread.currentThrea ...

  5. ffmpeg C++程序编译时报__cxa_end_catch错误

    解决方法在编译sh中加上 -lsupc++ 即可. 2.STL模块函数找不到,链接失败stdc++/include/bits/stl_list.h:466: error: undefined refe ...

  6. bzoj2750最短路计数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2750 枚举每一个起点,通过该边的子树中有多少节点就知道本次它被经过几次了: 因为同一起点到该 ...

  7. [转载]this 指向详细解析(箭头函数)

    本文转自:http://www.cnblogs.com/dongcanliang/p/7054176.html 为了以后更方便的查看,便做了转载 前言 this 指向问题是入坑前端必须了解知识点,现在 ...

  8. 设置JAVA HOME环境变量的秕处理

    echo "放在JDK目录下,win xp需要下载SETX.EXE" setx /m Java_Home "%cd%" setx /m ClassPath &q ...

  9. keepalive配置db层的ha的一些注意点

    具体db是那种都一样 db先做好replica,可以用自己带的,或者drbd的磁盘复制 db和keepalived必须在同一主机 keepalived里面的rs必须只有一个(否则,做不了主从,理论上会 ...

  10. 学习笔记之Python 3 教程

    Python 3 教程 http://www.runoob.com/python3/python3-tutorial.html Python的3.0版本,常被称为Python 3000,或简称Py3k ...