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. 【CodeForces - 651C 】Watchmen（map）

    Watchmen 直接上中文 Descriptions: 钟表匠们的好基友马医生和蛋蛋现在要执行拯救表匠们的任务.在平面内一共有n个表匠,第i个表匠的位置为(xi, yi). 他们需要安排一个任务计划 ...

  2. Jquery | 基础 | 慕课网 | 基本筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  3. 洛谷 P1072 Hankson 的趣味题 || 打质数表的分解质因数

    方法就是枚举,根据b0和b1可以大大减小枚举范围,方法类似这个http://blog.csdn.net/hehe_54321/article/details/76021615 将b0和b1都分解质因数 ...

  4. h5-18-文件操作-兼容判断

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 抽象类 abstract

    抽象类就是拿来继承的抽象方法就是拿来重写的 1.用abstract可以用来修饰类或方法,分别叫抽象类和抽象方法. 2.含有抽象方法的类必须被声明为抽象类.,抽象类必须被继承,抽象方法也必须被重写. 3 ...

  6. DNS练习之反向解析

    环境同正向解析一样. 切换到/var/named/chroot/etc目录下: 编辑named.rfc1912.zones文件,在末尾添加如下内容: [root@sishen63 etc]# vim ...

  7. 机器学习概念之特征处理（Feature processing）

    不多说,直接上干货! 肯定也有不少博友,跟我一样,刚开始接触的时候,会对这三个概念混淆. 以下是,特征处理.特征提取.特征转换和特征选择的区别! 特征处理主要包含三个方面:特征提取.特征转换和特征选择 ...

  8. java课程设计全程实录——第0天

    本次课设计划在5月25日完成.目前还剩18天. 第0天主要完成事项如下: 搭建开发环境 制定开发进度规划表 阅读前人的课设 详细: 1.IDE的下载,安装,以及配合使用的阿里巴巴编程规约插件的安装与测 ...

  9. Excuse me？这个前端面试在搞事！

    金三银四搞事季,前端这个近年的热门领域,搞事气氛特别强烈,我朋友小伟最近就在疯狂面试,遇到了许多有趣的面试官,有趣的面试题,我来帮这个搞事 boy 转述一下. 以下是我一个朋友的故事,真的不是我. f ...

  10. Java长存！12个Java长久占居主要地位的原因

    Java长存!12个Java长久占居主要地位的原因 我们很容易就会遗忘那些曾经在猿群中大热而又被各种新技术掩盖直至堙灭的技术的价值.就拿COBOL这个老猿们当年所用的神器来说,就跟条死鱼一样被现代猿基 ...