float的特性一
.元素‘浮动’
.脱离文档流
.但不脱离文本流
首先看一个案例，直观的了解下float的特性
<style>

　　.container{

　　　　background: red;

　　　　width: 400px;

　　}

　　.p1{

　　　　background: green;

　　　　float: left;

　　　　width: 200px;

　　　　height: 50px;

　　}

</style>

<body>

　　<div class="container">

　　　　<span class="p1">float</span>

　　　　<div class="p2">

　　　　　　很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字

　　　　</div>

　　</div>

</body>

这个效果很明显就是，p1设置了向左浮动，高度50，宽度200，背景绿色。浮动之后有什么影响呢？我们上面注意点之一是脱离了文档流。

我们看到p2在使用的时候占据了p1的空间，跟container是一样的空间大小。但是他影响了p2文字的展现。整个文字都绕开了p1。这种布局方式就是float本身的一个含义。float本身就是用于图文环绕效果的。所以这个解释了上面的注意点，float元素脱离了文档流，但是不脱离文本流。

float的特性二
.对自身的影响：
　　.形成“块”（BFC）
　　　　比如上面的例子，p1这个float元素可以设置宽高。span元素本身是无法设置宽高的。上面的p1中，float属性一旦去除，宽高就会失效
　　.位置尽量靠上
　　.位置尽量靠左(右)
我们再看一个案例
<style>

　　.container{

　　　　background: red;

　　　　width: 400px;

　　}

　　.p1{

　　　　background: green;

　　　　float: left;

　　　　width: 200px;

　　　　height: 50px;

　　}

</style>

<body>

　　<div class="container">

　　　　<span>写几个字</span>

　　　　<span class="p1">

　　　　　　float

　　　　</span>

　　　　<span class="p1">

　　　　　　float

　　　　</span>

　　</div>

</body>

如图，首先看到的几个字，如果上面demo的p2一样。是一个正常的元素。我们说会尽量靠上和尽量靠左。所以是左上角的位置。再往下又有一个float元素，这两个float元素样式是一模一样的。但是那几个字是必须排的。所以他没办法越过那几个字。所以尽量靠上，靠左，就成了这副样子。

如果p1的宽度加起来小于 400减去字的长度，第二个元素就能往上。

如果，两个flaot元素长度加起来大于400了，他就会往下掉。。这就是尽量靠上，尽量靠左的含义。

float特性三
.对兄弟元素的影响
　　.上面贴非float元素（一般float元素上面贴的都是非float元素）
　　.旁边贴float元素（靠左，或者靠右的时候贴float元素）
　　.不影响其它块级元素位置
　　.影响其它块级元素内部文本（三四两点就是特性一说的脱离文档流，不脱离文本流）
.对父级元素的影响
　　.从布局上“消失”（相当于从父级的空间里面消失了，消失了意味着父级不会再管他的宽高）
　　.高度塌陷（因为在父级的空间里消失了，所以父级对高度有可能会塌陷，防止塌陷的办法就是overflow）
<style>

　　.float{

　　　　float: left;

　　　　width: 100px;

　　　　height: 100px;

　　　　background: red;

　　}

</style>

<body>

　　<div class="main">

　　　　<span class="float">

　　　　　　float元素

　　　　</span>

　　</div>

</body>

我们看到float元素的宽高是有100像素的，但是main的高度却是0，没有被撑起来。高度塌陷了,防止塌陷的常用办法就是设置overflow，创建一个BFC。

float两栏布局
<style>

　　.container{

　　　　width: 800px;

　　　　height: 200px;

　　}

　　.left{

　　　　float: left;

　　　　background: red;

　　　　width: 200px;

　　　　height: 100%;

　　}

　　.right{

　　　　background: blue;

　　　　margin-left: 200px;

　　　　height: 100%;

　　　　
　　　　padding-left: 10px;

　　}

</style>

<body>

　　<div class="container">

　　<div class="left">

　　　　左

　　</div>

　　<div class="right">

　　　　右

　　</div>

</div>

</body>

float三栏布局
<style media="screen">

　　html *{

　　　　padding: 0;

　　　　margin: 0;

　　}

　　.layout article div{

　　　　min-height: 100px;

　　}

</style>

<body>

　　<section class="layout float">

　　　　<style media="screen">

　　　　　　.layout.float .left {

　　　　　　　　float: left;

　　　　　　　　width: 300px;

　　　　　　　　background: red;

　　　　　　}

　　　　　　.layout.float .right{

　　　　　　　　float: right;

　　　　　　　　width: 300px;

　　　　　　　　background: blue;

　　　　　　}

　　　　　　.layout.float .center{

　　　　　　　　background: yellow;

　　　　　　}

　　　　</style>

　　　　<article class="left-right-center">

　　　　　　<div class="left"></div>

　　　　　　<div class="right"></div>

　　　　　　<div class="center">

　　　　　　　　<h1>浮动解决方案</h1>

　　　　　　　　1、这是三栏布局中间部分

　　　　　　　　1、这是三栏布局中间部分

　　　　　　</div>

　　　　</article>

　　</section>

</body>

布局方式-float布局的更多相关文章

  1. CSS布局方式--inline-block 布局

    布局其实就是想办法怎样将一些元素横向的排列起来,纵向由于块级元素的存在会自动占据一行. inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行,而且使用 inline-bl ...

  2. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  3. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  4. 布局方式-flex布局

    .弹性盒子 .盒子本来就是并列的 .指定宽度即可 <style> .container { width: 800px; height: 200px; display: flex; bord ...

  5. inline-block布局方式

    刚研究了一下inline-block布局方式 inline-block布局方式是一种比float浮动更优的一种布局方式. 一个超简单的demo html: <!doctype html> ...

  6. Android 布局方式学习

    一.LinearLayout线性布局: 线性布局是程序中最常见的一种布局方式,线性布局可以分为水平线性布局和垂直线性布局两种, 通过android:orientation属性可以设置线性布局的方向 1 ...

  7. PyQt5四大布局方式

    1.绝对布局方式'''绝对布局方式,通过move的XY坐标方式来控制控件的位置'''from PyQt5.QtWidgets import *import sys,math class absolut ...

  8. Android布局方式总结

    Android的布局分别是:线性布局LinearLayout.相对布局RelativeLayout.帧布局FrameLayout.网格布局GridLayout.约束布局ConstraintLayout ...

  9. Html5 布局方式

    在Html5之前,统一采用的是Div+css的方式进行布局,但是却和开发人员的命名方式,喜好有关.在新的Html5中,布局却显得更加人性化,更易理解了.如增加了Header,Footer,Sectio ...

随机推荐

  1. oracle 查看一个表中的记录是否被锁住

    SELECT a.object_id, a.session_id, b.object_nameFROM v$locked_object a, dba_objects bWHERE a.object_i ...

  2. lnmp 一键搭建脚本

    转载注明出处!!!!!!!!! 不足之处望多多指教. 不明之处站内私. #!/bin/bash #################################################### ...

  3. 解决Input number 框能够能够输入eeeeee 的问题

    onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" 在input  type="n ...

  4. TOJ 2641 Gene

    描述 How can millions of different and complex structures be built using only a few simple building bl ...

  5. Android开发：使用Fragment改造TabActivity

    TabActivity在API 13(Android 3.2)被标记为过期,需要使用Fragment来实现,Fragment是Android 3.0引入的一个概念,主要就是为了适应各种不同的屏幕大小( ...

  6. 请以excel管理你的接口测试用例

    闲话休扯,上需求:自动读取.执行excel里面的接口测试用例,测试完成后,返回错误结果并发送邮件通知. 分析: 1.设计excel表格2.读取excel表格3.拼接url,发送请求4.汇总错误结果.发 ...

  7. POJ 3468——A Simple Problem with Integers——————【线段树区间更新， 区间查询】

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 86780   ...

  8. dpkg: error: dpkg status database is locked by another process 解决方法

    使用dpkg -i/apt命令安装,报错: ------------------------------------------------------------- dpkg: error: dpk ...

  9. 【VirtualBox】快照

    一.快照备份 虚拟机系统快照下来,以后就可以恢复到快照之前的系统 右上角->虚拟电脑工具->快照

  10. js字符操作

    js字符串方法预览: fromCharCode(num1, num2,,,), charAt(), charCodeAt(), length, split(''), slice(start, end? ...