cp from : https://www.cnblogs.com/cielzhao/p/5781462.html

最近在项目中有好几次遇到这个问题，感觉是浮动引起的，虽然用<div style="clear:both"></div>解决了，但自己不是特别明白，又在网上查了相关内容，是因为给li设置了浮动之后它就脱离当前正常的文档流，所以没办法撑开外层ul的高度。

以下面代码为例，其实有好几种解决方法，我用的这种并不是最简单的。

<!DOCTYPE html >

<html >

<head>

<meta charset="utf-8">

<title>给li设置float浮动属性之后，无法撑开外层ul的问题。</title>

<style type="text/css">

ul{

    border: 1px solid #000;

    width: 200px;

    height: auto;

    margin-top: 100px;

}

li{

    float: left;

    list-style: none;

    margin-left: 10px;

}

</style>

<body>

<ul>

    <li>星期一</li>

    <li>星期二</li>

    <li>星期三</li>

    <li>星期四</li>

    <li>星期五</li>

    <li>星期六</li>

    <li>星期天</li>

</ul>

</body>

</html>

以上代码显示结果如图，ul的边框变成了一条线，没有被撑开，；

可是我期望的效果是这样的：。

如果ul里边的内容是固定的，给ul加上高度就可以解决问题，但是遇到的项目中li是动态生成的，个数不能确定，所以高度只能设置成auto，这时候其实只要给外层ul也加上浮动属性就可以解决问题，但有时候布局会受到影响，只能根据情况而定；另外给ul加上overflow:auto/hidden也可以解决问题，如果要兼容ie6，后面加上"zoom:1"或者"width:100%"即可。

最后再总结一下，总共有4种方法：

第1种方法：在html代码里边给最后一个li后面加空元素清除浮动，div可以换成p或者其他。具体如下图:

第2种方法：给ul设置固定的高度。具体如下图:

第3种方法：给ul设置overflow属性，也可以是overflow:hidden。具体如下图:

第4种方法：给ul加浮动属性，可以换成float:right，但是很有可能布局就会收到影响。具体如下图:

每个人用的方法应该都不一样，我觉得第三种方法最简单，以后就用这种。哈哈，这会下班回家~~

[Web前端] 给li设置float浮动属性之后，无法撑开外层ul的问题。的更多相关文章

  1. 给li设置float浮动属性之后，无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  2. 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  3. [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...

  4. 【CSS学习】--- float浮动属性

    一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...

  5. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  6. CSS float 浮动属性

    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

  7. Web前端之复选框选中属性

    熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好 了.博主之前用户不少方法,经常Google到一些这个不好那个 ...

  8. web前端（6）—— 标签的属性，分类，嵌套

    属性 HTML标签可以设置属性,属性一般以键值对的方式写在开始标签中 1.HTML标签除一些特定属性外可以设置自定义属性,一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序. 2.属性值要用引 ...

  9. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

随机推荐

  1. C语言：指针实现输出梯形字符串

    用指针实现,实现过程无需将子串复制到一个新的字符串中.(10分) 题目内容: 用指针实现,实现过程无需将子串复制到一个新的字符串中. 输入格式: 字符串 输出格式: 子串 输入样例: computer ...

  2. 【AtCoder】AGC022

    A - Diverse Word 不到26位就加上一个最小的 到26位了就搜一下,最多回溯就一次,所以复杂度不大 #include <iostream> #include <cstd ...

  3. P3905 道路重建

    P3905 道路重建我一开始想错了,我的是类似kruskal,把毁坏的边从小到大加,并且判断联通性.但是这有一个问题,你可能会多加,就是这条边没用,但是它比较小,你也加上了.居然还有10分,数据也是水 ...

  4. MySQL服务器SSD性能问题分析与测试

    [问题] 我们有台HP的服务器,SSD在写IOPS约5000时,%util达到80%以上,那么这块SSD的性能究竟有没有问题,为解决这个问题做了下面测试. [工具] blktrace是linux下用来 ...

  5. ARP监控工具ARPalert

    ARP监控工具ARPalert   ARP协议用于IP转化为Mac地址.由于ARP协议的缺陷,导致被用于中间人攻击.为了防止ARP攻击,Kali Linux提供了专用工具ARPalert.该工具可以对 ...

  6. BZOJ4239 : 巴士走读

    考虑按时刻从早到晚模拟,计算出 f[i]:到达i点的最晚出发时间 g[i]:为了赶上第i辆车的最晚出发时间 然后将所有到达n号点的巴士按到达时间排序,查询的时候二分查找即可. 时间复杂度$O(n\lo ...

  7. spring-boot 速成(5) profile区分环境

    maven中的profile概念,在spring-boot中一样适合,只要约定以下几个规则即可: 一.不同环境的配置文件以"application-环境名.yml"命名 举个粟子: ...

  8. HDU 3472 HS BDC （混合图的欧拉路径判断）

    HS BDC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  9. 详细分析Memcached缓存与Mongodb数据库的优点与作用

    http://www.mini188.com/showtopic-1604.aspx 本文详细讲下Memcached和Mongodb一些看法,以及结合应用有什么好处,希望看到大家的意见和补充. Mem ...

  10. Revit API创建详图视图

    start //创建详图视图 Transaction ts = new Transaction(doc, "http://greatverve.cnblogs.com"); ts. ...