布局是什么？根据功能划分小块，再根据设计稿还原，书写静态页面，然后再在块里面填充内容，完善功能，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. 【java面试】算法篇之堆排序

    一.堆的概念 堆是一棵顺序存储的完全二叉树.完全二叉树中所有非终端节点的值均不大于(或不小于)其左.右孩子节点的值. 其中每个节点的值小于等于其左.右孩子的值,这样的堆称为小根堆: 其中每个节点的值大 ...

  2. 使用静态URL片段 URL路由 精通ASP-NET-MVC-5-弗瑞曼

  3. 记录 解决ubuntu16.04 ‘E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不可用) ’

    当运行sudo apt-get install/update/其他命令时,会出现如下提示: E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不 ...

  4. GP工作室—Alpha版本发布2

    GP工作室-Alpha版本发布2 一.简介 1.1作业要求 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationSc ...

  5. Python学习，第八课 - 函数

    本次讲解函数,由于内容比较多,小编列了个大纲,主要有一下内容: 1. 函数基本语法及特性 2. 函数参数 3.局部变量 4. 返回值 5.嵌套函数 6.递归 7.匿名函数 8.高阶函数 9.内置函数 ...

  6. Docker三剑客之Machine

    前言简介 Docker-machine(中文翻译docker机):一种提供管理多个docker主机的工具:提供docker主机容器的远程创建.管理.删除等功能:这样的docker主机容器前辈们称之为D ...

  7. Informatica在linux下安装搭建

    安装介质清单准备 介质名称 版本信息 描述 Informatica Powercenter 9.5.1 for Linux 64 bit 必须 Java Jdk 1.6.0_45 for Linux ...

  8. MYSQL-innobackupex备份脚本

    自动化运维,是数据库管理员的不懈追求.目前出现了一些数据库自动管理平台,但出现时间较短,不够稳定.最常用的工具依然是shell脚本. 现在需要管理的某mysql数据库,数据量在800G,使用dump备 ...

  9. 类与 Object 的应用

    # 类与 Object 的应用 + 面试题 类介绍 Java 程序是由若干个类组成的,类也是面向对象编程思想的具体实现. 以下为类的基本使用: public class Cat { // 私有属性 p ...

  10. Vue使用better-scroll左右菜单联动

    说明 最近想做一个vue商城小项目,练习一下vue的语法,刚刚好碰到了需要左右菜单实现联动,因此就接触了 better-scroll. github地址 中文文档. 代码 页面结构以及数据 //页面结 ...