float：就是在于布局，首先要介绍的是文档流（标准流），之后是浮动布局。

文档流：元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。

浮动布局：

1、float:  left   |   right

2、元素浮动之后不占据原来的位置（脱标）

3、浮动的盒子在一行上显示

4、行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block）

浮动作用：

1、文本饶图

2、导航制作

3、网页布局

文本饶图：这里有个十分特殊的知识点，就是当红色的div浮动以后，虽然p元素也是块状元素，但是p标签并没有往上顶到红色的div下。这是因为float当初被开发出来就是为了解决文字环绕的问题。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        .box1 {

            width: 400px;

            height: 500px;

            background-color: yellow

        }

        .box2 {

            width: 200px;

            height: 200px;

            background-color: red;

            float: left

        }

    </style>

</head>

<body>

    <div class="box1" style="">

        <div class="box2"></div>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

    </div>

</body>

</html>

效果：

导航制作：之前制作导航都是将文字放置于一个div中，然后设置它们的a标签为行内块。现在直接设置li为浮动就行了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body,ul,li{

            margin:0;

            padding: 0;

        }

        ul,li{

            list-style: none;

        }

        .nav{

            width: 800px;

            height: 40px;

            background: pink;

            margin: 20px auto;

        }

        .nav ul li{

            float: left;

        }

        .nav ul li a{

            display: inline-block;

            height: 40px;

            font: 14px/40px 微软雅黑;

            padding:0 20px;

            text-decoration: none;

        }

        .nav ul li a:hover{

            background: #aaa;

        }

    </style>

</head>

<body>

    <div class="nav">

        <ul>

            <li><a href="#">百度</a></li>

            <li><a href="#">百度一下</a></li>

            <li><a href="#">14期威武</a></li>

        </ul>

    </div>

</body>

</html>

效果：

CSS——float的更多相关文章

  1. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  2. [CSS]float&clear浮动

    CSS float 属性 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.  可取的值 ...

  3. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  4. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  5. css float left right 中间空间城数据无法显示

    css float left right 中间空间城数据无法显示 是由于设定了width具体值太小造成,简单用%值或不设置.

  6. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  7. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  8. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  9. CSS Float（浮动）

    CSS Float(浮动) 一.CSS Float(浮动) CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常 ...

  10. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

随机推荐

  1. 产品需求分析神器:KANO模型分析法

    前言: 任何一个互联网产品,哪怕是一个简单的页面,也会涉及到很多的需求,产品经理也会经常遇到这样的情况:老板,业务提的各种新需求一下子都扎堆,哪个需求对用户来说最重要,用户对我们的新功能是否满意?开发 ...

  2. 藏妹子之处（excel）

    问题描述: 今天CZY又找到了三个妹子,有着收藏爱好的他想要找三个地方将妹子们藏起来,将一片空地抽象成一个R行C列的表格,CZY要选出3个单元格.但要满足如下的两个条件: (1)任意两个单元格都不在同 ...

  3. 使用spring框架提供的处理中文乱码的过滤器

    在web-xml中直接写上spring框架提供的过滤器即可 <filter> <filter-name>encoding</filter-name> <fil ...

  4. 放大的X

    Problem Description 请你编程画一个放大的’X’.如3*3的’X’应如下所示: X X XX X 5*5的’X’如下所示:X X X X X X XX X   Input 输入数据第 ...

  5. MEAN,从MONGO DB里弄出点东东来啦，以REST风格显示JSON

    最近一直在弄弄的... javascript的风格弄熟了,我觉得肯定很快,,但心中有种感觉,DJANGO和MEAN这种结构,搞大的不行. 因为MVC这种结构感觉不如SPRING这些严谨,是不是我有偏见 ...

  6. nyoj_528_找球号（三）_201404152050

    找球号(三) 时间限制:2000 ms  |  内存限制:3000 KB 难度:2   描述 xiaod现在正在某个球场负责网球的管理工作.为了方便管理,他把每个球都编了号,且每个编号的球的总个数都是 ...

  7. Docker创建PHP镜像

    Step: 1. 创建Dockerfile FROM php:7.0-apache RUN chmod -R 755 /var/www 2. 创建镜像 docker build -t docker_n ...

  8. Unity3D Asset文件导出3DMax 可编辑格式

    本文章由cartzhang编写,转载请注明出处. 全部权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/60878354 作者:car ...

  9. 古代password

    古代password 个人信息:就读于燕大本科软件project专业 眼下大三; 本人博客:google搜索"cqs_2012"就可以; 个人爱好:酷爱数据结构和算法.希望将来从事 ...

  10. 湖南长沙IOS（xcode swift） 开发交流群

    264304701  我创建的 湖南部分的IOS开发人员交流群  请湖南的老乡们加下 在湖南做IOS开发人员的也请加下哈!