浮动
浮动是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. java 日志框架

    1.java常用日志框架介绍: https://www.cnblogs.com/chenhongliang/p/5312517.html 2.java各类日志组件汇总: https://blog.cs ...

  2. gdb调试多进程多线程程序

    一.调试的指令 1.list命令 list linenum 显示程序第linenum行的周围的程序 list function 显示程序名为function的函数的源程序 list 显示当前行后面的源 ...

  3. bash编程-sed

    sed(Stream Editor)是Linux系统下的一个文本流编辑器,它将文本文件内容逐行读取到标准输出,并将此行内容写入模式空间(pattern space),然后按照给定的地址定界和命令处理匹 ...

  4. Vue 父组件ajax异步更新数据,子组件props获取不到

    转载 https://blog.csdn.net/d295968572/article/details/80810349 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mo ...

  5. Http Header 之 Requests Header 和 Responses Header

    在开发中,经常会遇到对网络请求添加相应的头信息,下面我们梳理一下Http Header相关的内容. 一.Requests Header Header 解释 示例 Accept 指定客户端能够接收的内容 ...

  6. WebRTC学习之 Intel® Collaboration Suite for WebRTC源码流程解读

    年后回来,因为新项目的需求,开始了解WebRTC相关的知识.目前接触的是Intel® Collaboration Suite for WebRTC.刚开始看SDK发现很多概念是我目前不知道的,于是恶补 ...

  7. 第十节:详细讲解一下Java多线程,随机文件

    前言 大家好,给大家带来第十节:详细讲解一下Java多线程,随机文件的概述,希望你们喜欢 多线程的概念 线程的生命周期 多线程程序的设计 多线程的概念 多线程的概念:程序是静态的,进程是动态的.多进程 ...

  8. 仿B站项目(4)webpack打包第三方库jQuery

    概述 在项目中不可避免的会用到jquery等第三方库,来看看有什么问题,怎么解决. 遇到的问题 一般情况下,直接require第三方库,比如jquery,然后webpack会自动把第三方库打包进bun ...

  9. 678 "流浪地球"为什么是个好地方?(系统越复杂拥有好运气的机会也就越大)

    运气,其实就是一个复杂系统孕育出的,超出已知经验的解决方案.它不是没有产生机制.只不过,这个机制太复杂,涉及的因素太多.我们没法复制.所以,我们只能笼统的,把这套机制称为运气,或者命数. 举个例子,假 ...

  10. 比较List和ArrayList的性能及ArrayList和LinkedList优缺点

    List和ArrayList的性能比较 在使用ArrayList这样的非泛型集合的过程中,要进行装箱和拆箱操作,会有比较大的性能损失,而使用泛型集合就没有这样的问题.List是泛型,而ArrayLis ...