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. Oracle删除约束和主键的语句

    https://blog.csdn.net/xue_yanan/article/details/78210654?locationNum=8&fps=1

  2. Just a Hook 线段树 区间更新

    Just a Hook In the game of DotA, Pudge’s meat hook is actually the most horrible thing for most of t ...

  3. 一个简单的js队列，逻辑很清晰

    function Queue(type) { //type 是否是一个接着一个执行 function QueueConst() {} QueueConst.execute_ing=[], QueueC ...

  4. Lotto（DFS处理）

    题目再现 题目内容: 给定N个数字,再从中选定M个数字出来. 将每一种组合内的数字由小到大排列之后, 将全部组合依照字典序排列. 请你找出第X组的第Y个数字. 给定的数字为1~N. 范例1 (N,M, ...

  5. 插件化开发—动态载入技术载入已安装和未安装的apk

    首先引入一个概念,动态载入技术是什么?为什么要引入动态载入?它有什么优点呢?首先要明确这几个问题.我们先从 应用程序入手,大家都知道在Android App中.一个应用程序dex文件的方法数最大不能超 ...

  6. VFL演示样例

    上篇文章向大家介绍了VFL的基本的语法点,假设对下面演示样例不熟的童鞋,能够前去參考.废话不多说.我们直接来看演示样例. 演示样例一 将五个大小同样.颜色不同的view排成一行,view间的间隔为15 ...

  7. 最简单的基于FFmpeg的移动端样例：Android HelloWorld

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  8. Java 定时任务之Quartz

    使用CronTrigger CronTrigger 能够提供比 SimpleTrigger 更有具体实际意义的调度方案,调度规则基于 Cron 表达式,CronTrigger 支持日历相关的重复时间间 ...

  9. YTU 2734: 国家排序

    2734: 国家排序 时间限制: 1 Sec  内存限制: 128 MB 提交: 133  解决: 84 题目描述 世界格局动荡不安,10国紧急召开会议磋商对策.有些国家斤斤计较,参会代表的座位如何排 ...

  10. 华为FusionSphere概述——计算资源、存储资源、网络资源的虚拟化，同时对这些虚拟资源进行集中调度和管理

    华为FusionSphere概述 FusionSphere是华为自主知识产权的云操作系统,集虚拟化平台和云管理特性于一身,让云计算平台建设和使用更加简捷,专门满足企业和运营商客户云计算的需求.华为云操 ...