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. bzoj 1187: [HNOI2007]神奇游乐园【插头dp】

    要判边界!!要判边界!!要判边界!!if(j!=m)!!! 我真是zz横着转移要判断到底能不能向右边出边-- 然后剩下的和1814差不多,九十因为不要求经过所有格子,所以左右括号随时可以合并,但是注意 ...

  2. [NOIP2018校模拟赛]T2矩阵分组 Matrix

    题目链接: 矩阵分组 分析: 这道题求的是两部分极差当中大的那个的最小值.对于这种求最值的问题,我们很自然(其实并没有)地想到二分答案. 这个题有两个结论: (好像当时看出来了第一个?然后发现下面都不 ...

  3. Almost Acyclic Graph Codeforces - 915D

    以前做过的题都不会了.... 此题做法:优化的暴力 有一个显然的暴力:枚举每一条边试着删掉 注意到题目要求使得图无环,那么找出图上任意一个环,都应当要在其某一处断开(当然没有环是YES) 因此找出图中 ...

  4. Social Net ZOJ - 3649

    Social Net ZOJ - 3649 题意: 反正原题题意我是看不懂... 参考:http://www.cnblogs.com/names-yc/p/4922867.html 给出一幅图,求最大 ...

  5. 执行impdp时ORA-39213: Metadata processing is not available错误处理

    通过impdp命令将Oracle11g数据库的dmp文件导入至Oracle10g中时,报出如下错误: [oracle@dbsrv3 ~]$ impdp dhccms/dhccms DIRECTORY= ...

  6. ORACLE如何实现函数、包、存储过程的导入和导出

    建 议可以用常规的检查,检查一下:数据字典信息/exp 导出结构检查 1.检查 SELECT * FROM ALL_SOURCE t WHERE T.OWNER = '要查询用户' AND t.TYP ...

  7. wp跳转到评价界面代码

    wp跳转到评价界面代码(仅适用于wp8.0) MarketplaceReviewTask marketplaceReviewTask = new MarketplaceReviewTask(); ma ...

  8. Netty实现WebSocket

    package com.qmtt.server; import javax.annotation.PostConstruct; import javax.annotation.PreDestroy; ...

  9. [转]合理使用ArrayMap代替HashMap

    合理使用ArrayMap代替HashMap 2016年07月08日 15:34:44 阅读数:5938 转载请标注: 披萨大叔的博客 http://blog.csdn.net/qq_27258799/ ...

  10. mysql安装及基本概念

    1.mysql下载安装 在官网下载5.6版本(越老稳定性越好,现在公司一般都用5.6),选择windows,64bit .下载完解压看bin目录下是否有mysql·exe和mysqld.exe. 解压 ...