布局是什么？根据功能划分小块，再根据设计稿还原，书写静态页面，然后再在块里面填充内容，完善功能，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. c++ 文件的简单操作

    文件的读取操作 在程序设计中,文件常用的操作不外乎--打开.读.写.流指针操作.关闭.我日常中使用的比较多,但从来 没有细细总结今天就总结下具体的用法. 相关概念 计算机上的文件其实是数据的集合,对文 ...

  2. 《前端之路》--- 重温 Koa2

    目录 一.简单介绍 二. 路由 三.请求数据 四. 静态资源加载 五. 静态资源加载 六. koa2加载模板引擎 七. koa2 中简单使用 mysql 数据库 八. koa2 中使用单元检测 九. ...

  3. requests快速构造请求头的方法

    上图请求头内容,内容多不说,也不确认哪些数据是必须的,网上找到一个懒办法 快速一键生成 Python 爬虫请求头 实战演练 抓取网站:https://developer.mozilla.org... ...

  4. selenium等待方式之显示等待

    有时候,页面元素并未及时加载出来导致后面的步骤无法执行 这里就需要在加载前添加等待时间,让目标元素有足够的时间加载出来 第一种方法:使用time.sleep() 这种方法过于强制,无论元素是否加载出来 ...

  5. nginx文件压缩

    nginx文件压缩 如果我们租用了一个带宽很低的服务器,网站访问速度会很慢,这时我们可以通过让nginx开启GZIP压缩来提高网站的访问速度. 首先我们对nginx进行限速操作,限制每个连接的访问速度 ...

  6. 小白学 Python 数据分析（2）：Pandas （一）概述

    人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 概览 首先还是几个官方链接放一下: Pandas 官网:https://pandas.pydata.or ...

  7. 容器技术与docker

    名词介绍 IaaS:基础设施即服务,要搭建上层数据应用,先得通过互联网获得基础性设施服务 PaaS:平台即服务,搭建平台,集成应用产品,整合起来提供服务 SaaS:软件即服务,通过网络提供程序应用类服 ...

  8. SpringCloud与微服务Ⅴ --- Eureka服务注册与发现

    一.Eureka是什么 Eureka是Netflix的一个子模块,也是核心模块之一.Eureka是一个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故障转移.服务注册与发现对于微服务架构 ...

  9. django用户认证的session的应用

    from django.shortcuts import render,redirect def login(request): if request.method=='GET': return re ...

  10. provider networks和self-service networks

    Provider Network 服务布局 Self-Service Network 网络布局: 网络布局 Provider Networks概述  Provider networks - Conne ...