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. IT兄弟连 JavaWeb教程 Servlet 状态管理 会话跟踪

    HTTP协议是无状态的,我们的客户端与服务器的每一次请求与响应,我们服务器都没有记忆能力将客户端与服务器的多次交互数据进行存储与管理共有两种技术实现: ●  基于客户端实现:Cookie,将状态保存在 ...

  2. LeetCode.896-单调数组(Monotonic Array)

    这是悦乐书的第345次更新,第369篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第210题(顺位题号是896).如果数组单调递增或单调递减,则数组是单调的.如果对于所有 ...

  3. web.xml报错：Invalid content was found starting with element 'init-param'

    问题与分析 在web.xml中配置servlet节点时报错如下: cvc-complex-type.2.4.a: Invalid content was found starting with ele ...

  4. Hexo瞎折腾系列(2) - 添加背景图片轮播

    动态背景图片插件jquery-backstretch jquery-backstretch是一款简单的jQuery插件,可以用来设置动态的背景图片,以下是官方网站的介绍. A simple jQuer ...

  5. UWP 页面跳转传值

    如果涉及到页面跳转,一般用Frame这个控件来管理不同的页面. <Grid Name="RootGrid"> <Frame Name="RootFram ...

  6. 二分搜索 Codeforces Round #299 (Div. 2) C. Tavas and Karafs

    题目传送门 /* 题意:给定一个数列,求最大的r使得[l,r]的数字能在t次全变为0,每一次可以在m的长度内减1 二分搜索:搜索r,求出sum <= t * m的最大的r 详细解释:http:/ ...

  7. 初探Hibernate3源码--读取配置文件

    依照个人推测,要实现ORM框架,关键是如何拼凑sql语句再通过jdbc来进行对数据库的访问,另外将数据库返回的数据记录封装成对应的类也是必不可少的. 那么实现ORM框架的基本思路如下: 1,读取xml ...

  8. mysql replication错误常见处理

    大部分的错误,都是日志错误 日志本身的错误 主日志和中继日志都可能出错,可以使用mysqlbinlog来读一下mysqlbinlog mysql-bin.000007>/dev/null ##只 ...

  9. 【前端】模拟微信上传图片（带预览，支持预览gif）

    一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...

  10. MongoDB部署、使用、监控及调优

    MongoDB部署 系统环境:CentOS7   下载地址:http://mirrors.163.com/centos/7.6.1810/isos/x86_64/CentOS-7-x86_64-DVD ...