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. 洛谷P2585 [ZJOI2006]三色二叉树（树形dp）

    传送门 设$dp[u][i]$表示点$u$颜色为$i$时最多(最少)的绿点个数(这里用$0$表示绿点) 然后直接用树形dp就可以了 记得把情况讨论清楚 //minamoto #include<b ...

  2. locate的基本用法

    一.工作原理 1. locate是通过读取一个或多个由updatedb命令生成的数据库来查找文件的,而updatedb由计划任务程序cron每天运行来更新缺省的数据库(/var/lib/mlocate ...

  3. YCOJ黑熊过河

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

  4. NSA互联网公开情报收集指南：迷宫中的秘密·上

    猫宁!!! 参考链接: https://www.nsa.gov/news-features/declassified-documents/assets/files/Untangling-the-Web ...

  5. Django Views: Dynamic Content

    世味年来薄似纱,谁令骑马客京华. 小楼一夜听春雨,深巷明朝卖杏花. 矮纸斜行闲作草,晴窗细乳戏分茶. 素衣莫起风尘叹,犹及清明可到家. Your Second View: Dynamic Conten ...

  6. 模拟 HDOJ 5099 Comparison of Android versions

    题目传送门 /* 题意:比较型号的大小 模拟:坑点在长度可能为5,此时设为'A' */ #include <cstdio> #include <algorithm> #incl ...

  7. 在vue组件的stylus样式总 取消search类型的input按钮中默认样式

    在vue组件的stylus样式中 取消search类型的input按钮中默认样式 记录一个坑 环境 Vue组件 使用了Stylus的CSS风格. 问题 input输入框使用了 type="s ...

  8. Hibernate通过实体对象对应数据库表信息

    Hibernate通过实体对象对应数据库表信息,包括:数据库表名称.主键列名.非主键列名等. 获取对象映射缓存管理类: AbstractEntityPersister aep = (AbstractE ...

  9. 维骨力Glucosamine的最关键的几点...

    1.每日劑量應為多少?長期服用安全嗎? 由於葡萄糖胺(Glucosamine)和軟骨素(Chondroitin)原來就存在於人體,是人體每天會生產製造的必需營養素,因此,一般認為服用此類產品的安全性相 ...

  10. jmeter（二十一）JMeter 命令行（非GUI）

    一.应用场景 1.无需交互界面或受环境限制(linux text model) 2.远程或分布式执行 3.持续集成,通过shell脚本或批处理命令均可执行,生成的测试结果可被报表生成模块直接使用,便于 ...