1.首先，标签之所以有存在等级分类，是因为他们处于标准文档流（块级元素，行内元素，行内块元素）当中。

2.如何脱离标准文档流？

  • 浮动
  • 绝对定位
  • 固定定位

这些可以让一个标签脱离标准文档流，而元素一旦脱离标准文档流，也就意味着不再受文档流的特性约束。

3.浮动

  • none：表示不浮动，默认为不浮动
  • left：左浮动
  • right：右浮动

4.动的4大特性

  • 浮动的元素脱标
  • 浮动的元素互相贴靠
  • 浮动元素的字围效果
  • 收缩的效果

*元素一旦浮动之后，后面的元素就会占据前面元素的位置

*元素浮动之后 的确可以脱离文本文档流，所以就会有字围效果

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>浮动的特性</title>

         <style>

             .d1 {

                 width: 300px;

                 height: 300px;

                 background-color: red;

                 float: left;

             }

             .d2 {

                 width: 400px;

                 height: 400px;

                 background-color: pink;

             }

         </style>

     </head>

     <body>

         <div class="d1"></div>

                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur architecto modi accusamus illo illum necessitatibus debitis cumque expedita molestiae praesentium nihil consectetur itaque maxime facilis iste animi odio consequatur neque.

         Lorem --> ipsum dolor sit amet, consectetur adipisicing elit. Vero architecto nisi ipsum quibusdam eos quae officiis reprehenderit assumenda. Magni magnam voluptatum fuga fugit obcaecati ab repellendus sunt explicabo repudiandae illo! Porro dolorum mollitia esse cumque et similique non. Nulla minima laboriosam vero doloribus quidem cupiditate in magni consequatur rem quisquam nihil alias sit quaerat debitis consectetur quis aliquid numquam modi reiciendis id quas dolor unde? Dolores impedit aperiam perspiciatis magnam ut aspernatur quod temporibus accusamus. Iste dignissimos est consequuntur saepe quod hic placeat recusandae doloremque libero dolorum quaerat porro eum ut accusantium optio sapiente illo ea? Iste iure sint dolorem aliquid praesentium quisquam voluptas mollitia temporibus. Numquam sed porro aspernatur modi perferendis iusto debitis in veritatis excepturi corporis eaque consequuntur voluptas asperiores iste quod nostrum magni atque ducimus earum velit praesentium consectetur officia obcaecati dolorum sunt iure accusantium ab ipsa odit ipsum id beatae voluptatem soluta aut expedita fugiat vero. Esse id vitae ratione dolorum repellat aperiam dignissimos nesciunt minus! Fuga eos eum magni molestias dolor vero voluptate corporis odit doloribus tempora! Nulla illo eligendi nisi fugit atque laborum eveniet nam omnis nobis architecto provident est consectetur eius. Magnam ipsum qui tenetur eius aliquam consequuntur quam ut vitae magni alias explicabo porro ullam accusamus voluptatum voluptate aut enim nemo maxime provident dignissimos. Similique iste earum quos aspernatur voluptate aperiam suscipit repellat perferendis ipsa reiciendis quod quidem provident corporis eveniet enim! Accusantium fuga pariatur laboriosam facere ducimus consequatur accusamus maxime dicta et nisi expedita optio explicabo error ratione quibusdam mollitia deserunt nihil voluptates quos magnam eum odit voluptatum reiciendis enim ut voluptas sed. Fuga quas voluptate ratione libero perspiciatis ut dolores odio omnis corrupti laudantium saepe nulla hic. Optio consequatur molestiae ratione commodi alias laborum eveniet ullam quod accusamus consectetur iusto necessitatibus ipsum voluptate? Officia veniam tempore optio culpa dolorem numquam tempora sint nemo quisquam cupiditate itaque voluptatibus rem. Ullam provident blanditiis facilis obcaecati officiis nemo hic reiciendis repellendus assumenda nostrum qui cum perspiciatis esse enim distinctio itaque doloribus. Molestias corrupti harum natus ullam modi dolor atque laborum vel quod neque ratione quaerat temporibus error porro doloremque at numquam placeat quibusdam cupiditate quis nisi minus inventore! Labore quia voluptatum suscipit ratione voluptate laborum nobis doloribus. Eius minima magni obcaecati at consequatur atque doloribus ad similique eligendi et beatae commodi accusantium nihil neque voluptatibus odio totam mollitia facere reiciendis deserunt perferendis quo accusamus. Ullam alias corporis vitae laboriosam libero sapiente eius nihil ratione natus esse consequuntur a voluptates iure. Facere culpa officia adipisci veniam porro quod animi soluta reiciendis perspiciatis sunt magnam quos aliquid dolorum repudiandae sequi delectus doloremque quas nisi vero eligendi nam hic optio distinctio odit possimus iure recusandae. Natus et quos eius iure recusandae quam fuga cupiditate non? Architecto nemo possimus rerum temporibus

     </body>

 </html>

* 元素的收缩

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>lianxi</title>

     <style>

         div{

             float: left;

             background-color: red;

         }

     </style>

 </head>

 <body>

     <div>

         这是一段文字

     </div>

 </body>

 </html>

*元素浮动之后，当一行放不下了，会去前面找可以“挤一挤” 的位置，如果有就挪过去，如果没有就不去

eg:1.块级元素可以并排显示，块级元素不设置宽度时就不会占满父元素的100%

2.行内元素可以设置宽高，可并排显示

浮动会影响后续元素的布局

*浮动带来的恶劣影响

1.如果父元素没有设置宽度，而子元素全部浮动，那么父元素高度将会变为0

2.前面的元素浮动之后，会给后面的元素带来影响

此时我们需要清除浮动带来的影响，以让后续元素可以正常执行

清楚方法

1.隔墙法

 <div class="clear"></div>2         .clear{clear:left/right/both}

2.给父元素一个高度

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>练习</title>

     <style>

         .fu1{

             height: 500px;

             /*background-color: ;*/

         }

         .c1{

             width: 200px;

             height: 200px;

             float: left;

             background-color: blue;

         }

         .c2{

             width: 200px;

             height: 400px;

             float: left;

             background-color: #888;

         }

         .fu2{

             height: 150px;

             background-color: #222;

         }

     </style>

 </head>

 <body>

     <div class='fu1'>

         <div class='c1'>

         </div>

         <div class='c2'>

         </div>

     </div>

     <div class='fu2'>

     </div>

 </body>

 </html>

3.伪元素清楚法

 .clearfix:after{

             /*在box1盒子后面添加内容*/

             content:'.';

             /*设置为块,结合clear:both去想*/

             display: block;

             /*隐藏这个块,但是还占位置*/

             visibility: hidden;

             /*去掉高度,不占位置,取消冗余,*/

             height:0;

             /*最后清除浮动的影响*/

             clear:both;

         }

4.

overfiow:hidden;
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>小练习</title>

     <style>

         .box1{

             /*height: 500px;*/

             /*background-color: ;*/

             overflow: hidden;

         }

         .c1{

             width: 200px;

             height: 200px;

             float: left;

             background-color: blue;

         }

         .c2{

             width: 200px;

             height: 400px;

             float: left;

             background-color: #888;

         }

         .box2{

             height: 150px;

             background-color: #222;

         }

     </style>

 </head>

 <body>

     <div class='box1'>

         <div class='c1'>

         </div>

         <div class='c2'>

         </div>

     </div>

     <div class='box2'>

     </div>

 </body>

 </html>

溢出隐藏

overflow属性规定当内容溢出元素框时发生的事情。

说明：

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条

HTML中关于 浮动 的简单说明的更多相关文章

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

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

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

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

  3. IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世

    https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...

  4. HTML 中清除浮动

    html中如何清除浮动   在html中,浮动可以说是比较常用的.在页面的布局中他有着很大的作用,但是浮动中存在的问题也是比较多的.现在我们简单说一下怎么去除浮动 首先我们先简单的看一下浮动: 首先我 ...

  5. Deferred在jQuery和Angular中的使用与简单实现

    Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Ang ...

  6. java中Color类的简单总结

    java中Color类的简单总结 1.颜色的常识 任何颜色都是由三原色组成(RGB),JAVA中支持224为彩色,即红绿蓝分量取值 介于0-255之间(8位表示) 2.Color类中的常量 publi ...

  7. Linux 中 Vi 编辑器的简单操作

    Linux 中 Vi 编辑器的简单操作 Vi 编辑器一共有3种模式:命名模式(默认),尾行模式,编辑模式.3种模式彼此需要切换. 一.进入 Vi 编辑器的的命令 vi  filename //打开或新 ...

  8. CSS中的浮动和定位

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

  9. ASP.net中导出Excel的简单方法介绍

    下面介绍一种ASP.net中导出Excel的简单方法 先上代码:前台代码如下(这是自己项目里面写的一点代码先贴出来吧) <div id="export" runat=&quo ...

随机推荐

  1. API的查看

    步骤: 1. 双击打开API 2. 点击显示, 找到索引 3. 输入要查找的类名 , 敲击Enter两次 4. 看该类所属的包, java.lang包下的类,在使用的时候不需要导包 ,其他的都需要导包 ...

  2. Visual studio 正在从以下位置加载符号：Microsoft符号服务器 尝试取消禁用后续符号加载

    正在从以下位置加载符号:Microsoft符号服务器   尝试取消禁用后续符号加载 进入VS---工具---选项----调试----符号,看右边有个“Microsoft符号服务器”,将前面的勾去掉,( ...

  3. AtomicInteger的CAS算法浅析

    之前浅析过自旋锁(自旋锁浅析),我们知道它的实现原理就是CAS算法.CAS(Compare and Swap)即比较并交换,作为著名的无锁算法,它也是乐观锁的实现方式之一.JDK并发包里也有许多代码中 ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_08-SpringSecurityOauth2研究-解决swagger-ui无法访问

    3.3.4.4 解决swagger-ui无法访问 当课程管理加了授权之后再访问swagger-ui则报错: 这里默认配置的了所有的请求都必须认证 把图片认证的路径加进去的话 那么访问课程图片的列表 就 ...

  5. Qt编写自定义控件43-自绘电池

    一.前言 到了9102年了,现在智能手机不要太流行,满大街都是,甚至连爷爷奶奶级别的人都会用智能手机,本次要写的控件就是智能手机中的电池电量表示控件,采用纯painter绘制,其实也可以采用贴图,我估 ...

  6. Java Web接入支付宝扫码付款API（使用SDK证书配置properties ）

    一.支付宝当面付功能Demo 官方文档https://docs.open.alipay.com/194/106078/ ps:因为沙箱环境一经配置了证书公钥则无法重置 第一步下载项目SKD&D ...

  7. jmeter 测试 websocket 接口

    https://www.cnblogs.com/penghaihang/p/7724830.html(请求的亲测ok) https://www.jianshu.com/p/bb8b3e928607 h ...

  8. POPUP_GET_VALUES 金额字段不可编辑

    转自:https://blog.csdn.net/huanglin6/article/details/102733845 当在POPUP_GET_VALUES函数中参考的字段是个货币或者金额字段的话, ...

  9. 简单的django登录项目---带views视图函数（脚本文件）---用Bootstrap

    简单的django登录项目 1.首先建立工程,建立工程请参照:https://www.cnblogs.com/effortsing/p/10394511.html 2.在Firstdjango工程项目 ...

  10. Spring Boot使用JDBC方式连接MySQL

    首先去spring官网下载一个名为test的Spring Boot项目模板:https://start.spring.io/ 然后在mysql中的testdb数据库中新建一张名为test_user的表 ...