css3-9 css中的浮动怎么使用

一、总结

一句话总结：用来做一般的行效果，比如说手机左右分布的头部导航栏。浮动的东西放到一个div中去，里面的内容根据需求左浮动或者右浮动，然后记得加上清除浮动。然后这整个div就是一个整体了。

1、clear both的最常用的作用是什么？

撑开盒子

因为div中的元素如果都浮动的话，盒子会缩回去，也就是宽变成0，clear both 防止盒子缩回去。

2、浮动和定位的联系和区别是什么？

都脱离文档流

定位可以满世界乱跑，浮动只能在原先文档流行的左边和右边浮起来。

浮动：你之前在文档流的哪个位置，你浮动之后还在文档流的哪个位置，只不过是左边还是右边。

3、clear left的通俗意思是什么？

我的左边不能有人，有人的话，我宁可去第二行

4、浮动的一般用法是什么（应用场景和使用方法）？

用来做一般的行效果，比如说手机左右分布的头部导航栏。

浮动的东西放到一个div中去，里面的内容根据需求左浮动或者右浮动，然后记得加上清除浮动。然后这整个div就是一个整体了。

5、多个浮动的块标签为什么可以放在一行？

浮动可以脱离文档流，块标签脱离文档流就失去了独占一行的特点。

浮动用于块标签，让快标签的独占一行的功能消失

二、css中的浮动怎么使用

1、相关知识

清除浮动:
1.clear:left
#浮动之后左侧不能有人

2.clear:right
#浮动之后右侧不能有人

3.clear:both
#浮动之后左右都不能有人
#可以有效的防止盒子回缩

2、代码

float浮动和清除浮动

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

         }

         .img{

             background: #ccc;

             width:200px;

             height:200px;

             float:left;

             margin-left:100px;

         }

         .row{

             margin-bottom:10px;

         }

     </style>

 </head>

 <body>

     <div class="row">

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div style='clear:both'></div>

     </div>

     <div class="row">

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div style='clear:both'></div>

     </div>

     <div class="row">

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div class="img">

             <img src="logo.png" alt="">

         </div>

         <div style='clear:both'></div>

     </div>

 </body>

 </html>
 

css3-9 css中的浮动怎么使用的更多相关文章

  1. CSS中的浮动和定位

    在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...

  2. css中的浮动以及清除浮动

    对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...

  3. 如何理解CSS中的浮动 ：其实他就像乘坐扶梯一样

    只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况:       做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...

  4. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  5. CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法

    在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...

  6. css 中的浮动

    css中 浮动的作用: 使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”. css中 浮动的特点: 1)改变元素类型,使元素支持宽高: 2)半脱离文档流: 3)文本环绕: 4)顶对齐 ...

  7. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  8. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  9. 详细解读css中的浮动以及清除浮动的方法

    对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...

随机推荐

  1. 关于搭建Session服务器（转载）

    Session服务器配置指南与使用经验 一.摘要 所有Web程序都会使用Session保存数据. 使用独立的Session服务器可以解决负载均衡场景中的Session共享问题.本文介绍.NET平台下建 ...

  2. SQLITE数据表主键设置Id自增方法

    SQLITE数据表主键设置Id自增方法 标签: sqliteintegerinsertnulltableapi 2010-01-12 08:39 35135人阅读 评论(8) 收藏 举报  分类: S ...

  3. 【hdu 4333】Revolving Digits

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=4333 [题意] 就是给你一个数字,然后把最后一个数字放到最前面去,经过几次变换后又回到原数字,问在这些数 ...

  4. 处理async void 方法中无法捕捉异常信息

    利用 NuGet库 Nito.AsyncEx 中的 AsyncContext类. 添加NuGet类库,使用AsyncContext AsyncContext.Run(Action action);

  5. 洛谷 P1208 [USACO1.3]混合牛奶 Mixing Milk

    P1208 [USACO1.3]混合牛奶 Mixing Milk 题目描述 由于乳制品产业利润很低,所以降低原材料(牛奶)价格就变得十分重要.帮助Marry乳业找到最优的牛奶采购方案. Marry乳业 ...

  6. uva 1456(dp)

    题意:有n个数字u1,u2,u3-un,每一个数字出现的概率pi = ui/(u1 + u2 + - + un),分成w组.计算期望值. 第一组例子的五个数字例如以下 30 5 10 30 25 分成 ...

  7. POJ 1012：Joseph

    Joseph Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 50068   Accepted: 19020 Descript ...

  8. 初学者路径规划 | 人生苦短我用Python

    纵观编程趋势 人生苦短,我用Python,比起C语言.C#.C++和JAVA这些编程语言相对容易很多.Python非常适合用来入门.有人预言,Python会成为继C++和Java之后的第三个主流编程语 ...

  9. Java中接口继承泛型接口

    在使用Mybatis做web开发时,每一个模块的数据持久层的接口都会定义:增删改查四个方法.我想为什么不新建一个Base接口来做所有数据持久层的父接口呢? 于是,我试验了一下,建立了一个泛型接口,里面 ...

  10. 洛谷 P2755 洗牌问题

    P2755 洗牌问题 题目描述 给你2N张牌,编号为1,2,3..n,n+1,..2n.这也是最初的牌的顺序. 一次洗牌是把序列变为n+1,1,n+2,2,n+3,3,n+4,4..2n,n.可以证 ...