布局是什么？根据功能划分小块，再根据设计稿还原，书写静态页面，然后再在块里面填充内容，完善功能，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. @ControllerAdvice实现优雅地处理异常

    @ControllerAdvice,是Spring3.2提供的新注解,它是一个Controller增强器,可对controller中被 @RequestMapping注解的方法加一些逻辑处理.最常用的 ...

  2. Knative 简介

    原文地址:https://yq.aliyun.com/articles/658800

  3. .netcore 3.1高性能微服务架构：webapi规范

    1.1 定义 1.基础接口:单一职责原则,每个接口只负责各自的业务,下接db,通用性强. 2.聚合接口:根据调用方需求聚合基础接口数据,业务性强. 1.2 协议 1. 客户端在通过 API 与后端服务 ...

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

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

  5. MySQL拼接字符串，GROUP_CONCAT 值得拥有

    上一篇文章 跨表更新,看到自己写的SQL像个憨憨写了关于跨表个更新的内容.一年过的很快,文中后来的两位员工 馮大 和 馮二 也要面对无情的 KPI 考核了,他们工作干的很不错,performance ...

  6. 【WPF学习】第二十七章 Application类的任务

    上一章介绍了有关WPF应用程序中使用Application对象的方式,接下来看一下如何使用Application对象来处理一些更普通的情况,接下俩介绍如何初始化界面.如何处理命名行参数.如何处理支付窗 ...

  7. sqlserver 分页模糊查询

       积少成多 ----  仅以此致敬和我一样在慢慢前进的人儿 问题: 在sqlserver 进行模糊查询,出现问题 最初使用“concat”,进行拼串操作,如下所示: <select id = ...

  8. Web 项目没有发布到我们安装的tomcat目录下

    新手做Web项目的时候,在Ecplise把app发布到tomcat,但最后项目并没有发布到我们自己安装的 tomcat目录下,而是在.metadata\.plugins\org.eclipse.wst ...

  9. Exception:Request processing failed; nested exception is org.apache.ibatis.binding.BindingException

    异常 在测试Spring MVC+Mybatis整合时,运行 Maven build -> tomcat7:Run 遇到如下异常 从异常信息上看,是找不到mapper对应的xml文件,于是我到t ...

  10. ubuntu19配置静态IP并开启SSH远程登陆

    前言  从ubuntu从17.10开始,已经不再在/etc/network/interfaces里配置IP,即使配置了也不会生效,而是改成netplan方式 ,配置写在/etc/netplan/文件夹 ...