float

特性1：可以为行内浮动元素设置宽高

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        span{

            background-color: #e3a345;

            width: 200px;

            height: 200px;

        }

    </style>

</head>

<body>

    <span>123</span>

</body>

</html>

运行发现，宽高设置没有生效。加上float：left后，宽高设置生效了。前后结果变化：

2.两端自适应布局

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        span{

            background-color: #e3a345;

            width: 50px;

            height: 50px;

            float: left;

        }

        div{

            background-color: red;

            width: 100%;

            margin-left: 60px;

            height: 80px;

        }

    </style>

</head>

<body>

    <span>left</span>

    <div>right</div>

</body>

</html>

运行结果：

clear

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

Clear给元素约定一个规则，哪一边不允许出现浮动元素，如果出现了，则通过改变自身的位置【换下一行】来适应这个规则

三个元素都float left，中间元素clear right 无效，clear left，则后续两个都换到下一行去了

规律：clear的方向要对应floar 的方向，换行之后，原本跟在自己后面的元素依然跟在自己的后面

包裹浮动元素

<style>

    .clearfix:after{

        content:" ";

        display: block;

        height: 0;

        visibility: hidden;

        clear: both;

    }

    .container{

        background-color: #0F9E5E;

    }

</style>

<div class="container clearfix">

    <div style="float: left"> 123 </div>

</div>

另一种包裹浮动元素的方式是 使用BFC

float 和 clear的更多相关文章

  1. CSS中float和Clear的使用

    CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...

  2. 89组合margin、padding、float、clear问题

    有关css外边距margin和内边距padding样式,简而述之,顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-b ...

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

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

  4. CCS float vs clear

    有人已经写过了.(*^__^*) 嘻嘻…… 为啥我不能写, ( ‵o′)凸 float 首先,HTML的布局是流布局.其元素是分为行内元素和块级元素的. 所谓行内元素就是接着写不会发生换行的元素如&l ...

  5. CSS的float与clear

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

  6. float、clear、overflow

    浮动: float:  none|left|right 作用使得标签失去块级标签的独占一行效果,向某个方向靠拢 标签浮动了,也需要占地方,有时候出现未浮动的div覆盖部分浮动div是浏览器的bug情况 ...

  7. Css中position、float和clear整理

    Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", ...

  8. CSS float与clear & 替换元素与非替换元素

    css3盒模型(box)中的一个概念,在css这种,每个元素生成了包含内容的框,有内联元素和块级元素之分.也可以区分为替换元素与非替换元素. 替换元素:浏览器根据标签的元素与属性来判断显示具体的内容. ...

  9. float和clear

    简介 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部分的流动性. 浮动元素是float值不为none的元素. 可能 ...

随机推荐

  1. YCOJ黑熊过河

    Description 有一只黑熊想过河,但河很宽,黑熊不会游泳,只能借助河面上的石墩跳过去,他可以一次跳一墩,也可以一次跳两墩,但是每起跳一次都会耗费一定的能量,黑熊最终可能因能量不够而掉入水中,所 ...

  2. Nginx+tomcat集群环境搭建（Windows下）

    实验环境 windows xp sp3 Nginx版本:1.5.12: 下载地址:http://nginx.org/en/download.html Tomcat版本:6.0.39 下载地址:http ...

  3. tarjan有向图的强连通

    强连通:在有向图G中,两个顶点间至少存在一条路径,则两个点强连通. 强连通图:在有向图中,每两个顶点都强连通,则有向图G就是一个强连通图. 强连通分量:在非强连通图中的极大强连通子图,就称为强连通分量 ...

  4. 常见的问题:https://localhost:1158/em 无法打开

    常见的问题:https://localhost:1158/em 无法打开 安装了Oracle Database 11g,里面有个基于网页的管理工具“https://localhost:1158/em” ...

  5. 488 Zuma Game 祖玛游戏

    回忆一下祖玛游戏.现在桌上有一串球,颜色有红色(R),黄色(Y),蓝色(B),绿色(G),还有白色(W). 现在你手里也有几个球.每一次,你可以从手里的球选一个,然后把这个球插入到一串球中的某个位置上 ...

  6. 你有学习者综合征吗？Web 开发是重灾区

    [导读]:学习者综合征的主要表现:学而不用,不停学习,却没有真正实际应用知识来做东西.如果过去的一年里,学习的语言或框架超过三个,那可能已经感染学习者综合征了.Web 开发是重灾区咯. 你有学习者综合 ...

  7. laravel学习笔记(一)

    laravel 简述 优点:优雅.简洁.工程化(项目架构,协同开发) 版本:2011 June 1.0 ,LTS(long time) ,laravel 5.4 功能:队列.搜索.数据库搜索.定时脚本 ...

  8. GPU、CPU的异同

    一.概念 CPU(Center Processing Unit)即中央处理器,GPU(Graphics Processing Unit)即图形处理器. 二.CPU和GPU的相同之处 两者都有总线和外界 ...

  9. xcode uml 工具

    https://github.com/PaulTaykalo/objc-dependency-visualizer ./generate-objc-dependencies-to-json.rb -d ...

  10. 如何开发、本地测试、发布 Laravel 扩展包？

    如何开发.本地测试.发布 Laravel 扩展包?  Laravel/ 1年前/  4022 /  11   现在已经有了很多,关于如何开发 Laravel 扩展包的文章.但是大多文章写的太过片面,不 ...