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. Xtts v4变化&先决条件&已知问题

    V4变化的主要有:     1.这个采购使用简化的命令.源的一个命令(--backup)和目标的一个命令(--restore). 2.此过程只需要在源和目标的$ TMPDIR(res.txt)之间复制 ...

  2. Percona Mysql备份

    介绍 Percona是唯一一款开源.免费的mysql热备份工具,实现了对InnoDB数据库的非阻塞式的备份.有如下优势:1.完整.快速.可靠的备份2.备份期间不打断事务执行(innodb引擎)3.备份 ...

  3. Angular4+NodeJs+MySQL 入门-06 接口配置

    在上篇中说了怎么调用接口,这篇就来说说,接口配置吧. 后端是用NodeJS来写的,由于写后台(以前用的是C#语言)的时候,大部操作都在是对数据库表的增.删.改.查操作, 比如:根据查询出来的数据,然后 ...

  4. log4j 2整理

    # Log4j 2最佳实践 #Log4j的1.x版本已经被广泛使用于很多应用程序中.然而,它这些年的发展已经放缓.它变得越来越难以维护,因为它需要严格遵循很老的Java版本,并在2015年8月寿终正寝 ...

  5. 使用openssl在命令行加密

    对于需要在应用软件中进行加密编程的开发者,通过命令行把基本的加密操作做一遍是很有意义的.openssl支持在命令行进行各种基本加密算法的操作.这些操作过程无需编程,其命令参数与程序函数调用加密的参数有 ...

  6. java 读写操作大文件 BufferedReader和RandomAccessFile

    一 老问这问题,两个都答出来算加分项? 二 具体代码如下,没什么好说的直接说对比. BufferedReader和RandomAccessFile的区别RandomAccessFile 在数据越大,性 ...

  7. 面试题 数据库sql

    一.建表的结构和数据,在sqlserver直接用就行了 USE [test] GO /****** Object: Table [dbo].[TEACHER] Script Date: 05/16/2 ...

  8. Sql server 操作笔记

    (1)更改字段类型 (2)添加字段 alter table class add InKinDate intEXECUTE sp_addextendedproperty N'MS_Description ...

  9. DOM的概念和简单应用：使用DOM解析XML数据

    概念:DOM是Document Object Model的简称,即文档数据模型. Oracle公司提供了JAXP(Java API for XML Processing)来解析XML.JAXP会把XM ...

  10. FontSize sp 和 dp 的区别

    dp不会随着“设置->显示->字体大小”的改变而改变,sp会. sp会随着configeration的配置来scale, dp不会. 所以,什么时候用sp, 什么时候用dp需要斟酌.