浮动
浮动是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. UniGUI的布局使用说明

    (unigui的页面布局还是很强大的,基本什么的排版都能搞好.前面部分为原文章翻译,翻译不一定很准确,就能看吧,后面有使用说明,有什么不明白的欢迎加我QQ(910300653)一起交流学习) 一.布局 ...

  2. CentOS 7安装新版RabbitMQ解决Erlang 19.3版本依赖

    通过yum等软件仓库都可以直接安装RabbitMQ,但版本一般都较为保守. RabbitMQ官网提供了新版的rpm包(http://www.rabbitmq.com/download.html),但是 ...

  3. SQL Server 最大并行度

    一.概念 1.关联掩码(affinitymask) 为了执行多任务,MicrosoftWindows2000和WindowsServer2003有时会在不同的处理器之间移动进程线程.虽然从操作系统方面 ...

  4. DOM扩展:DOM API的进一步增强[总结篇-上]

    DOM1级主要定义了文档的底层结构,并提供了基本的查询操作的API,总体而言这些API已经比较完善,我们可以通过这些API完成大部分的DOM操作.然而,为了扩展DOM API的功能,同时进一步提高DO ...

  5. 你应该这么理解TCP的三次握手和四次挥手

    前言: TCP协议是计算机的基础,他本身是一个非常非常复杂的协议. 本文只是蜻蜓点水,将从网络基础以及TCP的相关概念介绍开始,之后再将三次握手,四次挥手这些内容来阐述. 最后介绍一些常见问题,并给出 ...

  6. JavaScript在IE和Firefox的不兼容问题解决方法总结

    1.兼容Firefox的 outerHTML,Firefox中没有outerHtml的方法. if (window.HTMLElement) { HTMLElement.prototype.__def ...

  7. [Swift]LaunchScreen.storyboard设置启动页

    设置[General]->[App Icons and Launch Images] 注意:当App不是用LaunchScreen.xib来配置启动页时,[LaunchScreen File]置 ...

  8. Nginx的安装与部署

    1:安装工具包 wget.vim和gcc yum install -y wget yum install -y vim-enhanced yum install -y make cmake gcc g ...

  9. Java序列化技术即将被废除!!!

    我们的对象并不只是存在内存中,还需要传输网络,或者保存起来下次再加载出来用,所以需要Java序列化技术.Java序列化技术正是将对象转变成一串由二进制字节组成的数组,可以通过将二进制数据保存到磁盘或者 ...

  10. Python系列之环境安装

    Python可以实现强大的数据爬虫功能,并且数据分析与挖掘挺方便,也提供了大量的库,比如numpy, pands,matplotlib等.尤其,使用Python做机器学习也成了近年来的趋势,有人经常会 ...