布局是什么？根据功能划分小块，再根据设计稿还原，书写静态页面，然后再在块里面填充内容，完善功能，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面试| 精选基础题(3)

    每天进步一点点,距离大腿又近一步! 阅读本文大概需要6分钟 系列文章 java面试| 精选基础题(1) java面试|精选基础题(2) 1.float f=3.4;是否正确? 答:不正确,编译无法通过 ...

  2. Photoshop 2020安装教程

    首先来看看新增功能 [Photoshop 2020新增功能] 1.ipad和云文档 2.预设改进 3.新对象选择工具 4.转换行为一致 5.改进的属性面板 6.智能对到图层 7.增强的转换变形. 需要 ...

  3. Beta版本

    Beta版本 博客说明 这个作业属于哪个课程 http://edu.cnblogs.com/campus/xnsy/GeographicInformationScience 这个作业的要求在哪里 ht ...

  4. Dynamics 365 CRM Connected Field Service 不能接收IoT Alert

    今天浪费了2,3个小时再connected field service(CFS)上面. 状况如下 1. 在CFS中添加了新的customer assets,并且点击了注册按钮. 2. 注册步骤一直在i ...

  5. golang中基本类型存储大小和转换

    Go语言的基本类型有: bool string int.int8.int16.int32.int64 uint.uint8.uint16.uint32.uint64.uintptr byte // u ...

  6. 《即时消息技术剖析与实战》学习笔记10——IM系统如何应对高并发

    一.IM 系统的高并发场景 IM 系统中,高并发多见于直播互动场景.比如直播间,在直播过程中,观众会给主播打赏.送礼.发送弹幕等,尤其是明星直播间,几十万.上百万人的规模一点也不稀奇.近期随着武汉新型 ...

  7. obj2gltf安装详细教程

    在线转换地址:http://52.4.31.236/convertmodel.html 在使用cesium的过程中需要使用到gltf模型,官方推荐使用obj2gltf插件将obj模型转换成gltf格式 ...

  8. Docker基础内容之数据持久化

    数据卷的特性 数据卷是一个可供一个或多个容器使用的特殊目录,它绕过 UFS 数据卷可以在容器之间共享和重用,相当于将一个分区挂载到多个目录下面 数据卷内容的修改会立马生效 数据卷的更新,不会影响镜像: ...

  9. Word Embeddings: Encoding Lexical Semantics（译文）

    词向量:编码词汇级别的信息 url:http://pytorch.org/tutorials/beginner/nlp/word_embeddings_tutorial.html?highlight= ...

  10. 【WPF学习】第三十四章 资源基础

    WPF允许在代码中以及在标记中的各个位置定义资源(和特定的控件.窗口一起定义,或在整个应用程序中定义). 资源具有许多重要的优点,如下所述: 高效.可以通过资源定义对象,并在标记中的多个地方使用.这会 ...