随笔记一下 一个浮动的元素 如果没有设置宽高 将会自动收缩为文字的宽高 脱标 贴边 字围 收缩
浮动有开始 就要有清除
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> li { float: left; width: 100px; height: 40px; background-color: gold; } </style> </head> <body> <div> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>OC</li> </ul> </div> <div> <ul> <li>swift</li> <li>java</li> <li>PHP</li> </ul> </div> </body> </html>
效果
可以看到div作为一个块级元素 竟然没有两行显示 第二个div中的li去贴第一个div的边了
可以看到浮动和浮动之间还是有关系的（第二个div中的li去贴第一个div的边了）
原因就是div没有设置高度 不能给自己浮动的‘孩子们’一个容器
所以一个元素要浮动 那么他的父亲一定要有高度.
那么可以知道，清除浮动的第一个方法就是 盒子有高度(可以清除浮动与浮动之间的影响) 即给浮动的元素的祖先加高度
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素
网页制作中，高度height很少出现,因为能被内容撑高!
清除浮动方法二
clear both 分为 clear:left clear:right
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> li { float: left; width: 100px; height: 40px; background-color: gold; list-style: none; } .box1 { clear: both; } </style> </head> <body> <div> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>OC</li> </ul> </div> <div class="box1"> <ul> <li>swift</li> <li>java</li> <li>PHP</li> </ul> </div> </body> </html>
效果
可以看到清除了浮动（两个浮动之间的影响被清除了）
但是这个方法有一个致命的缺陷 margin在视觉上失效了
清除浮动方法三
隔墙法(外墙)
也是使用clear both 但是位置有变化
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css">
* {
margin:0px;
padding:0px;
}
li { float: left; width: 100px; height: 40px; background-color: gold; list-style: none; text-align: center; } .cl { clear: both; } /* .h { height: 0px; } */ </style> </head> <body> <div class="box1"> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>OC</li> </ul> </div> <div class="cl h"></div> <div class="box2"> <ul> <li>swift</li> <li>java</li> <li>PHP</li> </ul> </div> </body> </html>
注意clear both的位置，.h可以控制间距
内墙法
<style type="text/css"> * { margin: 0px; padding: 0px; } li { float: left; width: 100px; height: 40px; background-color: gold; list-style: none; text-align: center; } .cl { clear: both; } .h { height: 10px; } </style> <body> <div class="box1"> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>OC</li> </ul> <div class="cl h"></div> </div> <div class="box2"> <ul> <li>swift</li> <li>java</li> <li>PHP</li> </ul> </div> </body>
一个父亲是不能被浮动的儿子撑出高度的
内墙法比外墙法的好处是 可以撑出父亲的高度
overflow:hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div.news { width: 500px; height: 300px; border: 1px solid blue; margin: 100px; } ul { list-style: none; } li { border-bottom: 1px dashed gray; /* 和加内墙的效果一样 可取其中一种 */ overflow: hidden; } .news ul li span.title { float: left; } .news ul li span.date { float: left; margin-left: 35px; } /* .cl { clear: both; } .h { height: 5px; } */ </style> </head> <body> <div class="news"> <ul> <li> <span class="title">嘻嘻嘻嘻嘻嘻嘻</span> <span class="date">2019-07-06</span> <!-- <div class="cl h"></div> --> </li> <li> <span class="title">嘻嘻嘻嘻嘻嘻嘻</span> <span class="date">2019-07-06</span> <!-- <div class="cl h"></div> --> </li> <li> <span class="title">嘻嘻嘻嘻嘻嘻嘻</span> <span class="date">2019-07-06</span> </li> </ul> </div> </body> </html>
https://www.jianshu.com/p/7e04ed3f4bea
总结
1 浮动的元素只能被有高度的盒子关注，也就是说，如果盒子内部有浮动，那么这个盒子有高，那么浮动不会相互影响。但是工作中我们绝不护给所有的饿盒子加高度，因为麻烦，并且不能适应页面的快速变化。
2.最简单的清除盒子的方法 给盒子添加 clear both 表示盒子内部的元素不受其他盒子的影响 但是margin 会失效 两个盒子之间会没有间隙
3.隔墙法(外墙) 和 （内墙）
内墙法的有点 不仅可以清除浮动间的影响，并且能撑出所在盒子的高度
4. overflow：hidden 这个属性的本意是将所有溢出盒子的内容隐藏掉，但是 我们发现这个东西可以用于浮动的清除，我们知道一个父亲不能被浮动的儿子撑出高度，但是加了这个属性，父亲就会被浮动的儿子撑出高度。能让margin生效