浮动
浮动是css里面布局用的最多的属性。
  1. .box1{
  2.                      float: left;
  3.                      width: 300px;
  4.                      height: 400px;
  5.                      background-color: yellowgreen;
  6.               }
  7.               .box2{
  8.                      float: left;
  9.                      width: 400px;
  10.                      height: 400px;
  11.                      background-color: skyblue;
  12.               }
两个元素并排了,并且两个元素都能够设置宽度、高度了(这在刚才的标准流中,不能实现)。
浮动想学好,一定要知道三个性质。

1 浮动的元素脱标

一个span标签不需要转成块级元素,就能够设置宽度、高度了。所以能够证明一件事儿,就是所有标签已经不区分行内、块了。也就是说,一旦一个元素浮动了,那么,将能够并排了,并且能够设置宽高了。无论它原来是个div还是个span
  1. span{
  2.                      float: left;
  3.                      width: 200px;
  4.                      height: 200px;
  5.                      background-color: orange;
  6.               }

2 浮动的元素互相贴靠

号大哥。
号大哥,自己去贴左墙。
右浮动:   float:right;

3 浮动的元素有“字围”效果

HTML:
  1. <div>
  2.               <img src="data:images/1.jpg" alt="" />
  3.        </div>
  4.        <p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
  5. </p>
让div浮动,p不浮动:
div挡住了p,但是p中的文字不会被挡住,形成“字围”效果。
关于浮动我们要强调一点,浮动这个东西,我们在初期一定要遵循一个原则:
永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动。

4浮动的收缩

收缩:一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度(这点非常像行内元素)。
比如:
  1. <style type="text/css">
  2.               div{
  3.                      float: left;
  4.                      background-color: gold;
  5.               }
  6.        </style>
这个div浮动了,且没有设置宽度,那么将自动缩紧为内容的宽度:
整个网页,就是通过浮动,来实现并排的。

5清除浮动

不清除例子:

第二排的第一个li会去贴靠第一组的最后一个li
因为div没有高度,不能给自己浮动的孩子们,一个容器。
1.方法一:如果一个元素要浮动,那么它的祖先元素一定要有高度。高度的盒子,才能关住浮动。
2.方法二:clear:both; or clear:left; or clear:right;(清除别人对我的影响)。         问题:margin会失效。
3.方法三(method 3):
“隔墙法 ”:第二组浮动会去追第二组浮动,利用一个“墙”将两个浮动隔开。之后互不影响。
例:
“内墙法”:本质就是给父亲自动撑高
4.方法4(method 4):overflow:hidden;本意表示溢出隐藏,溢出边框的内容(文字,图片等)都要隐藏。
偏方:一个父亲不能被自己浮动的儿子,撑出高度,只要给父亲加上overflow:hidden;那么,父亲就能被儿子撑出高了。
注:不支持IE6,加上 zoom:1;

浮动布局float的更多相关文章

  1. inline-block代替浮动布局float:left列表布局最佳方案

    基于各位前辈的辛勤劳动,下面得出使用inline-block替换float:left;的最佳方案. html代码 <div class="list"> <ul&g ...

  2. Css - 浮动布局

    Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...

  3. css盒子布局,浮动布局以及显影与简单的动画

    08.05自我总结 一.盒子布局 1.盒子布局的组成 margin border padding content 2.margin margin是外边距,控制盒子的显示位置相对于他的上一级 left. ...

  4. 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  5. 写给后端的前端笔记:浮动(float)布局

    写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...

  6. CSS之浮动布局(float,浮动原理,清除/闭合浮动方法)

    css之浮动布局 本人博客:查看文章   1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的 ...

  7. float浮动布局(慕课网CSS笔记 + css核心技术详解第四章)

    ---------------------------------------------------------------------- CSS中的position: CSS三种布局方式: 标准流 ...

  8. HTML定位和布局----float浮动

    1.定位体系一共有三种 (1)常规流: (2)浮动定位 (3)绝对定位 2.float属性常用的语法: (1)float:left:左浮动 (2)float:right:右浮动 (3)float:no ...

  9. 网页布局——float浮动布局

    我的主要参考资料是[Object object]的文章 float 布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂,这里详细讲一下 首先,什么是浮动? 浮动元素是脱离文档流的,但不脱离 ...

随机推荐

  1. Android Studio中的大量findViewById

    一. 分析 在Android Studio中开发时,findViewById是用的最多的函数之一.经常需要对返回的view进行类型转换,输入麻烦.代码丑陋. 本文提供两种方案来解决这个问题: 1.安装 ...

  2. Visual Studio Code 写Python 代码

    最近在博客园新闻里面看到微软发布的Visual Studio Code 挺好用的,现在在学习Python,查看官网发布的VSCode 是支持Python代码,自己试着安装用一下,下面是我的安装以及配置 ...

  3. ACM知识点分类

    (知识点分类.看完想(╯‵□′)╯︵┻━┻) orz...一点点来吧.简单标记一下. 蓝色,比较熟悉,能够做. 蓝绿色,一般熟悉,需要加强 红色,(比个辣鸡.jpg) (标记完突然想打人...) 第一 ...

  4. Java学习笔记42(序列化流)

    对象中的数据,以流的形式,写入到文件中保存 过程称为写出对象,对象的序列化 ObjectOutputStream将对象写到文件中,实现序列化 在文件中,以流的形式,将对象读取出来, 读取对象,对象的反 ...

  5. HttpRunner框架(一)

    HttpRunner 是一款面向 HTTP(S) 协议的通用测试框架,只需编写维护一份 YAML/JSON 脚本,即可实现自动化测试.性能测试.线上监控.持续集成等多种测试需求. 中文使用文档地址:h ...

  6. python中基于queue的打印机仿真算法

    使用打印机的模型是queue中最经典的应用之一,这里就回顾一下queue在这里的使用方法和 起的重要作用. 为了仿真打印状态,这里需要把真实环境中的三个物理模型要建模出来,分别是:打印者,打印 任务, ...

  7. python多进程没有锁队列范例

    假设有一些任务要完成.为了完成这项任务,将使用几个过程.所以,将保持两个队列.一个包含任务,另一个包含已完成任务的日志. 然后实例化流程来完成任务.请注意,python队列类已经同步. 这意味着,我们 ...

  8. 可能比文档还详细--VueRouter完全指北

    可能比文档还详细--VueRouter完全指北 前言 关于标题,应该算不上是标题党,因为内容真的很多很长很全面.主要是在官网的基础上又详细总结,举例了很多东西.确保所有新人都能理解!所以实际上很多东西 ...

  9. 线程安全-002-多个线程多把锁&类锁

    一.多个对象多把锁 例子代码: package com.lhy.thread01; public class MultiThread { //static private int num = 0; / ...

  10. OPC安装-配置(http://www.mabotech.com)

    1.使用opc,需要在机器上安装OPC运行环境.opc运行环境包含:opc_aeps.dll.opccomn_ps.dll.opcdaauto.dll.OpcEnum.exe.opcproxy.dll ...