float实现文字环绕图片效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        body{

            font-family: '微软雅黑';

        }

        .per{

            width: 400px;

            border: 1px solid #CCC;

            padding: 5px;

        }

        .red{

            width: 100px;

            height: 100px;

            background: red;

            margin: 10px;

            float:left;

        }

    </style>

</head>

<body>

    <div class="per">

        <div class="red"></div>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

    </div>

</body>

</html>

清除浮动的方法一：

在浮动元素后面使用一个空元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        .container{

            width:500px;

            border:1px solid #000;

        }

        .div{

            width: 100px;

            height:100px;

            float:left;

        }

        .div1{

            background-color:red;

        }

        .div2{

            background-color:yellow;

        }

        .div3{

            background-color:green;

        }

        .clear{

            clear:both;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="div div1"></div>

        <div class="div div2"></div>

        <div class="div div3"></div>

        <div class="clear"></div>

    </div>

</body>

</html>

清除浮动的方法二：

给容器添加overflow:hidden;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        .container{

            width:500px;

            border:1px solid #000;

            overflow: hidden;

        }

        .div{

            width: 100px;

            height:100px;

            float:left;

        }

        .div1{

            background-color:red;

        }

        .div2{

            background-color:yellow;

        }

        .div3{

            background-color:green;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="div div1"></div>

        <div class="div div2"></div>

        <div class="div div3"></div>

    </div>

</body>

</html>

清除浮动的方法三：

css3的:after伪元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float</title>

    <style>

        .container{

            width:500px;

            border:1px solid #000;

            overflow: hidden;

            zoom:1;

        }

        .div{

            width: 100px;

            height:100px;

            float:left;

        }

        .div1{

            background-color:red;

        }

        .div2{

            background-color:yellow;

        }

        .div3{

            background-color:green;

        }

        .clearfix:after{

            content:'.';

            display: block;

            height:0;

            visibility: hidden;

            clear:both;

        }

        .clearfix{

            zoom:1;/*兼容ie6/7*/

        }

    </style>

</head>

<body>

    <div class="container clearfix">

        <div class="div div1"></div>

        <div class="div div2"></div>

        <div class="div div3"></div>

    </div>

</body>

</html>

css基础-float浮动的更多相关文章

  1. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  2. CSS 基础 例子 浮动float

    一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...

  3. css之float(浮动)的特性

    详解CSS float属性  float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...

  4. CSS清除float浮动

    一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...

  5. CSS之float浮动

    CSS理解之float浮动 首先我们看看W3C给出的关于 float 的说明: 参考资料   MDN   W3C

  6. css基础（浮动 清除f浮动）

    文档流(标准流) 1.元素自上而下,自左而右  2.块元素,独占一行,行内元素在一行上显示,碰到父级元素的边框换行   浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框 ...

  7. CSS基础知识---浮动，定位和盒模型

    转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...

  8. CSS基础之浮动属性float图文详解

      宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”.   标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:超脱 ...

  9. html/css中float浮动的用法

    一.float基础用法示例 1.我们先建两个div盒子,设置高度.宽度和背景颜色: 最开始两个盒子在网页上的位置如下: 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了右边,但是蓝色盒子就 ...

随机推荐

  1. zabbix3.4搭建微信报警

    身为小白的我在历经被百度查到的资料坑了无数次之后,终于找到了一个正确的文档,下面是我自己的对于安装过程的理解与阐述. 一.申请微信企业号,获取以下数据. 企业ID:(在我们企业最下方可以看到) 应用的 ...

  2. 安卓开发实战-记账本APP（五）

    今天将昨天剩余的bug修复,并且完成图标的美化,设置长按删除,模仿支付宝实现金额的动态增加. ①将昨天的布局进行了修改:之前是fragment,改成FrameLayout布局,不再设置name,进而在 ...

  3. DOCKER 学习笔记7 Docker Machine 建立虚拟机实战，以及错误总结

    前言 通过以上6小节的学习,已经可以使用DOCKER 熟练的部署应用程序了.大家都可以发现使用 DOCKER 带来的方便之处,因为现在的话,只是在一台服务器上部署,这样部署,我们只需要一条命令,需要的 ...

  4. 命令行压缩解压缩一 7z

    命令行压缩解压缩一 7z  1) 简介  7z,全称7-Zip, 是一款开源软件.是目前公认的压缩比例最大的压缩解压缩软件.  主页:http://www.7-zip.org/  中文主页:http: ...

  5. 《Python学习手册 第五版》 -第1章 问答环节

    第一章的主要内容是解疑答惑的,这个部分也是很适合初学者的,回答了大部分初学者所关注的问题 1.为什么使用Python,或者说Python的优点, 作者是分为两个部分来谈的,人们使用中的经验总结以及Py ...

  6. .Net Core中IOC容器的使用

    打代码之前先说一下几个概念,那就是什么是IOC.DI.DIP 虽然网上讲这些的已经有很多了,我这里还是要再赘述一下 IOC容器就是一个工厂,负责创建对象的 IOC控制反转:只是把上端对下端的依赖,换成 ...

  7. Go语言实现：【剑指offer】对称的二叉树

    该题目来源于牛客网<剑指offer>专题. 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. Go语言实现: 方法一:递归 / ...

  8. 你知道EasyX吗

    关于C++控制台上的图形界面,你知道一个东西叫做EasyX吗? 作为一个退役的OI选手(WTF?\(3^2-3^1\)年级退役?),在退役之后总想找点事情做. 开发个游戏?(我只会控制台) 学下人工智 ...

  9. 【译文连载】 理解Istio服务网格（第三章 流控）

    第3章 流控.............................................................................................. ...

  10. Python单引号、双引号、三个双引号的区别

    单引号与双引号是作用是一样的,都是字符串定界符. 如果字符串里面包含的与边界一样的符号,需要转义符来将该符号转成普通字符,不然编译器会将字符串中的那个单引号或双引号当成字符串的边界. 例如: ‘I d ...