布局是什么？根据功能划分小块，再根据设计稿还原，书写静态页面，然后再在块里面填充内容，完善功能，js施加交互效果。div作为一个容器，独占一行，代码书写习惯从上至下属于标准流，而浮动float的css样式则打破div（标准流）独占一行的传统！具体代码展示如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>float布局打破标准流,神助攻clear清浮动</title>

     <style type="text/css">

     .box1>img{

         float: left;/*左浮动*/

         float: right;/*右浮动*/

         float:none;/*不浮动*/

     }

     /* .box1,.box2,.box3,.box4,.box5{

         float: left;

         width: 200px;

         height: 200px;

         margin: 10px;

         background-color: red;

     } */

 /* 如现在展示，我想要5个盒子一行展示,是不是要float,可是float后，我们发现本来包裹盒子的大容器box受到了浮动的影响，是不是要清浮动 ,我们发现给大盒子添加高度是可以撑开它的，但是这样是不是太麻烦，如果里面盒子的宽高变化，外面的盒子的高度是不是又要调整，那么有没有其他办法了*/

     .box1{

         width: 200px;

         height: 200px;

         margin: 10px;

         background-color: red;

     }

     .box2,.box3,.box4,.box5{

         float: left;

         width: 200px;

         height: 200px;

         margin: 10px;

         background-color: red;

     }

     .box{

         /* border: 1px solid red; */

         background-color: chartreuse;

         /* height: 300px; */

     }

     .box6{

         clear: both;

     }/*新添加一个class,用 clear: both;清除浮动*//*可是外面不能为了清除浮动就单独添加一个class在页面上*/

     /*重点来了:使用伪元素清除浮动*/

     /* .box::after{

         content: "";

         display: block;

         clear: both;

     } */

     /* 根据h2里面的文字考虑的问题只能这样展示 */

     .box::before,.box::after{

         content: "";

         display: table;

     }

     .box::after{

         clear: both;

     }

     </style>

 </head>

 <body>

     <!-- <div class="box1">/*一个大的容器盛放所有浮动元素*/

         <img src="https://pic.cnblogs.com/avatar/1350951/20200208114706.png" alt="">

         <div class="box2">学习脚本最好的方法之一就是多练习,测试是来表明bug的存在而不是不存在。</div>

     </div> -->

 <div class="box">

     <div class="box1"></div>

     <div class="box2"></div>

     <div class="box3"></div>

     <div class="box4"></div>

     <div class="box5"></div>

     <!-- <div class="box6"></div> -->

 </div>

 <h2>最后一个问题来了，根据"盒模型大小取决于它的padding，margin，border数值"这篇文章介绍的margn值问题话，我们把.box里面的border值去除下.box1不做浮动话，正常思维它和上面的box是有一个margin值10px的间隔的，但是现在没有</h2>

 </body>

 </html>

float布局打破标准流,神助攻clear清浮动的更多相关文章

  1. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  2. css的核心内容 标准流、盒子模型、浮动、定位等分析

    1.块级元素:如:<div></div>2.行内元素:如:<span></span>从效果中看块级元素与行内元素的区别: 通过CSS的设置把行内元素转换 ...

  3. css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？一起来$('.float')

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...

  4. CSS定位与布局：普通流

    CSS定位与布局属于CSS的基础,也是CSS布局影响很大的一部分,具体主要包括三种定位与布局机制( Positioning schemes):普通流,浮动,绝对定位. 其实除了这三种之外,还有一些定位 ...

  5. html5的float属性超详解（display，position， float）（文本流）

    html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...

  6. div css float布局用法

    float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...

  7. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  8. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  9. line-block代替float布局；

    line-block代替float布局: 我们先看看float的一些特性(特征) 当我们改变浏览器的大小会出现这样的效果: 或则这样: 有时候,我们希望,以第一排最高的元素为换行基准时,我们就可以使用 ...

随机推荐

  1. [bzoj1875] [洛谷P2151] [SDOI2009] HH去散步

    Description HH有个一成不变的习惯,喜欢饭后百步走.所谓百步走,就是散步,就是在一定的时间 内,走过一定的距离. 但 是同时HH又是个喜欢变化的人,所以他不会立刻沿着刚刚走来的路走回. 又 ...

  2. windows下生成文件目录树

    1.命令提示: tree /? 2.显示当前目录下的目录树(不显示文件) tree 3.递归显示目录结构(显示文件,常用于项目说明) tree /F 4.将显示的内容重定向到txt tree > ...

  3. 20191211 HNOI2017 模拟赛 问题A

    题目: 分析: 好难好难... 下来听神仙讲.. 每一个长度为n-2的prufer序列一一对应一棵大小为n的树... 每个点在序列中的出现次数为该点的度数减一 哦??? ... 哦... prufer ...

  4. React 解析/ 第二节 使用 Reac

    官方脚手架 create-react-app React 提供了一个官方的命令行工具(CLI)—— create-react-app,是专门用于快速搭建单页面应用(SPA)的脚手架,它基于 Webpa ...

  5. Jutil 单元测试

    eclipse 自身集成了jtuil,右击项目,点击bulidpath,addjar,如下所示添加jutil 新建一个Junit的测试类用来测试上面的测试方法,新增Junit的测试类方法如下: // ...

  6. 安装jrebel并激活

    1.File-Settings-Plugins搜索jrebel,找到JRebel for IntelliJ ,点击install(我这里已经安装过了,所以显示的是更新) 2.重启idea 3.激活步骤 ...

  7. springboot打印sql语句及执行时间

    有时候我们程序的接口比较耗时,需要优化,这时我们可能需要了解该接口执行了哪些sql语句以及耗时 1.引入jar包 <!--监控sql日志--> <dependency> < ...

  8. java线程池及创建多少线程合适

    java线程池 1.以下是ThreadPoolExecutor参数完备构造方法: public ThreadPoolExecutor(int corePoolSize,int maximumPoolS ...

  9. 如何快速搭建一个 Node.JS 项目并进入开发？

    了解:如何快速搭建一个项目并进入开发? 在此不概述 Node.JS 的历史以及发展过程. 因为之前接触过通过 Java 开发语言,所以明确地知道一个服务器所需的文件,以及一个服务器所需要的操作. 那么 ...

  10. DOCKER 学习笔记7 Docker Machine 在阿里云实例化ECS 以及本地Windows 实例化虚拟机实战

    前言 通过以上6小节的学习,已经可以使用DOCKER 熟练的部署应用程序了.大家都可以发现使用 DOCKER 带来的方便之处,因为现在的话,只是在一台服务器上部署,这样部署,我们只需要一条命令,需要的 ...