一、float的基本规律

　　规律1：

　　标准流模型中的块级盒子，默认宽度100%；
　　而浮动的块级盒子，宽度不会自动伸展，而是由内容（文字、padding）撑开；
　　浮动后的行级元素，可以设置宽度高度等属性。
　　规律2：
　　当一个盒子浮动后，标准的其他未浮动盒子将视浮动盒子不存在而占据浮动盒子原来的位置（浮动盒子会盖在未浮动盒子上面）。但是，未浮动盒子中的文字内容，将会收到浮　动盒子宽度的影响（浮动盒子不能盖住未浮动盒子的文字内容）
　　>>>浮动能够打破文档流，但是不能打破文字流。
　　规律3：
　　可以设置clear属性是标准流中的其他盒子不受之前盒子的浮动影响。
　　规律4
　　如果父盒子没有指定高度，而父盒子中的所有盒子全部浮动，将导致父盒子的高度塌陷，也就是高度无法被子盒子撑开而变为0.
二、解决子盒子浮动，父盒子高度塌陷的问题
　　①、给父盒子添加overflow：hidden属性.！！！最常用！！！
　　②、让父盒子也浮动！！
　　③、在父容器的最后添加一个高度为0的空div，并添加clear:both；属性清除掉浮动的影响
　　④、使用伪对象选择器::after生成一个空的元素。
　　　　#i::after{
　　　　display: block;
　　　　content: "   ";
　　　　height: 0px;
　　　　clear: both;
　　　　}
三、练习实例　

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>贵美商城</title>
<style type="text/css">

*{
padding: 0px;
margin: 0px;
}

span{
text-decoration: underline;
}

#div{
background-image: url(image/TIM图片20180310153452.gif);
width: 200px;
height: 330px;
background-repeat: no-repeat;
}

#div .ul{
/*解决ul中所有li浮动以后，ul高度变为0的问题*/
overflow: hidden;
}

#div .title{
color: #FF7300;
text-indent: 66px;
}
#div .ul li{
list-style: none;

width: 65px;
height: 35px;
font-size: 14px;
line-height: 50px;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div>
<span>你好，欢迎访问贵美商城！</span>
</div><br />

<div id="div">
<div style="height: 36px;"></div>
<h4 class="title">家用电器</h4>

<ul class="ul">
<li>大家电</li>
<li>电冰箱</li>
<li>电视机</li>
<li>洗衣机</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
</ul>

<div style="height: 20px;"></div>
<h4 class="title">家用电器</h4>

<ul class="ul">
<li>大家电</li>
<li>电冰箱</li>
<li>电视机</li>
<li>洗衣机</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
</ul>
</div>
</body>
</html>

盒子浮动float的更多相关文章

  1. 经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  2. 经验分享：CSS浮动(float,clear)通俗讲解(转载)

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  3. 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  4. 彻底理解浮动float CSS浮动详解 清除浮动的方法

    我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 ...

  5. CSS.04 -- 浮动float、overflow、定位position、CSS初始化

    标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...

  6. （转）经验分享：CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  7. 那些年我们一起清除过的浮动float与clearfix

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  8. (转)经验分享：CSS浮动(float,clear)通俗讲解

    文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身 ...

  9. 解决盒子浮动时margin会显示两倍的美观问题

    当给几个大小一样有boder的盒子浮动时,会出现margin自动加起来的结果. 此时可以给每个盒子一个margin-left:-border的长来实现很好的效果,这样右边的盒子会把左边盒子的右边bor ...

随机推荐

  1. SVN报E155024: Invalid relocation destination

    大家开发过程会遇到一个场景! 我们在使用SVN版本管理工具进行开发的过程中,前一个版本在Branch->201803 分支开发完成之后,后一版本要求在Branch->201804版本开发 ...

  2. CXF 开发 REST 服务

    今天我们将视角集中在 REST 上,它是继 SOAP 以后,另一种广泛使用的 Web 服务.与 SOAP 不同,REST 并没有 WSDL 的概念,也没有叫做"信封"的东西,因为 ...

  3. linux-2.6.18源码分析笔记---信号

    一.相关数据结构及其位置(大致浏览即可,介绍流程时再来仔细看) 1.1 进程描述符struct task_struct所在目录:include\linux\sched.h 关注task_struct中 ...

  4. Spring Boot with Spring-Data-JPA学习案例

    0x01 什么是Spring Boot? Spring Boot是用来简化Spring应用初始搭建以及开发过程的全新框架,被认为是Spring MVC的"接班人",和微服务紧密联系 ...

  5. (Matlab)GPU计算所需的配置

    电脑:联想扬天 M4400 系统:win 7 X64 硬件:NVIDIA GeForce GT 740M 独显2G     硬件驱动: 软件: Matlab 2015a   %需要安装 Paralle ...

  6. 强烈推荐！！！Fiddler抓取https设置详解（图文）

    很多实用fiddler抓包,对于http来说不需太多纠结,随便设置下就能用,但是抓取https就死活抓不了, 诸如以下问题: creation of the root certificate was ...

  7. 如何在win10查看wifi密码

    tep1 找到wifi图标 step 2 右键点击打开网络共享中心 没有啦!!

  8. 【动态规划】滚动数组的求解（C++）

    虽然接触动态规划算法已经有一段时间,给一个01背包问题,能够做到一个表格简单粗暴下去,然后求得结果,但心里总觉得对这个算法理解十分不到位,抱着对算法的热爱,网上很多大牛的算法思维实在让我佩服的五体投地 ...

  9. React Native 轻松集成统计功能（Android 篇）

    关于推送的集成请参考这篇文章,本篇文章将引导你集成统计功能,只需要简单的三个步骤就可以集成统计功能. 第一步 安装 在你的项目路径下执行命令: npm install janalytics-react ...

  10. 小草手把手教你 LabVIEW 串口仪器控制——初识VISA串口

    有些人,学习一样东西时候,喜欢现成的例子.很多人学习一门技术,都喜欢现成的例子开始,比如学单片机的啊,最开始都是修改的例子吧,学语言的也是.最开始都是模仿.这个年头看书上的理论知识太浪费时间了.所以啊 ...