一、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. newInstance()和new()的区别

    转载:http://www.jobui.com/mianshiti/it/java/7148/ newInstance: 弱类型.低效率.只能调用无参构造.new: 强类型.相对高效.能调用任何pub ...

  2. Algorithm --> 判读是否是子树

    问题 判断一棵树是否是另一棵树的子树,如图 思路 问题分两步: 找值相同的根结点(遍历解决) 判断两结点是否包含(递归:值.左孩子.右孩子分别相同) 树节点定义 struct TreeNode { i ...

  3. PHP微信公众平台oauth2.0网页授权登录类的封装demo

    一.微信授权使用的是OAuth2.0授权的方式.主要有以下简略步骤: 第一步:用户同意授权,获取code 第二步:通过code换取网页授权access_token 第三步:拉取用户信息(需scope为 ...

  4. 如何用Word编辑参考文献------这是引用一位大师的

    如何用Word编辑参考文献修改文献是一件非常痛苦的事情,虽然现在也有很多软件可以编排参考文献,其实word本身就可以. 采用合适的编辑方法会方便地做到整齐,规范,自动排序和交叉引用.1.以尾注的方式插 ...

  5. linux小白成长之路9————打包部署SpringBoot项目

    [内容指引] SpringBoot项目介绍: 打包SpringBoot项目: 1.pom.xml: 2.application.properties配置: 3.application-dev.prop ...

  6. 【RabbitMQ系列】 Spring mvc整合RabbitMQ

    一.linux下安装rabbitmq 1.安装erlang环境 wget http://erlang.org/download/otp_src_18.2.1.tar.gz tar xvfz otp_s ...

  7. linux,windows,ubuntu下git安装与使用

    ubuntu下git安装与使用:首先应该检查本地是否已经安装了git ,如果没有安装的话,在命令模式下输入 sudo apt-get install git 进行安装 输入git命令查看安装状态及常用 ...

  8. 2017-2018-1 Java演绎法 第一周 作业

    团队学习:<构建之法> [团队成员]: 学号 姓名 负责工作 20162315 马军 日常统计,项目部分代码 20162316 刘诚昊 项目部分代码,代码质量测试 20162317 袁逸灏 ...

  9. 学号：201621123032 《Java程序设计》第7周学习总结

    1:本周学习总结 1.1:思维导图:Java图形界面总结 2:书面作业 2.1: GUI中的事件处理 2.1.1: 写出事件处理模型中最重要的几个关键词 事件:如鼠标单击,滑动,输入汉字等. 事件源: ...

  10. XML使用练习

    #!/usr/bin/env python # -*- coding:utf-8 -*- import requests from xml.etree import ElementTree as ET ...