一、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. Jenkins集成Docker镜像实现自动发布

    1. 思路&流程 Jenkins集成Docker镜像实现自动发布与Jenkins发布mavne项目思路一样总体流程 为:Jenkins 拉去远端源码 -- gitl实现应用打包 -- jenk ...

  2. color 圆盘染色

    Color 圆盘染色 题目大意:给你一个圆盘,等分成n个扇形,有m种颜色,每两个相邻的扇形不能相交,求染色方案数. 注释:m,n<=$10^6$. 想法:这题是小圆盘染色的加强版(小圆盘染色?) ...

  3. 导入TensorFlow报错

    C:\....\Anaconda3\envs\py35\lib\site-packages\h5py\__init__.py:36: FutureWarning: Conversion of the ...

  4. [BZOJ 1040][ZJOI2008]骑士

    1040: [ZJOI2008]骑士 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 5403  Solved: 2060[Submit][Status ...

  5. 新事物学习---Chrome上使用PWA

    PWA是什么 PWA(Progressive Web Apps)是 Google 最近在提的一种 Web App 形态 (或者如 Wikipedia 所称的"软件开发方法").PW ...

  6. Docker深入浅出系列教程——Docker简介

    我是架构师张飞洪,钻进浩瀚代码,十年有余,人不堪其累,吾不改其乐.如果你和我的看法不一样,请关注我的头条号,我们一起奇闻共赏,疑义相析. 本节属于入门简介,从三个小方面进行简单介绍Docker. Do ...

  7. spring框架学习笔记4：SpringAOP实现原理

    AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善.OOP引入 ...

  8. JavaScript(第十五天)【匿名函数和闭包】

      学习要点: 1.匿名函数 2.闭包 匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数.声明:本节内容需要有面向对象和少量设计模式基础,否则无法听懂.(所需基础15章的时候已经声明 ...

  9. 利用1.1.1.1进行DNS网络加速,仅需2分钟让网络更快

    NEWS 近日,Cloudflare 和 APNIC联合推出了1.1.1.1DNS网络加速. Cloudflare 运行全球规模最大.速度最快的网络之一.APNIC 是一个非营利组织,管理着亚太和大洋 ...

  10. Linux下vim上编辑实现进度条

    1.效果展示: 进度条,先来看一个效果: 这是进度结果,模拟实现了进度条的前进.百分比的现实.以及稍微的动画特效. 2.原理描述: 因为Linux系统下的输出有缓存,如果及时刷新显示,就可以得到我们想 ...