块级元素:独占一行
h1~h6 p div 列表
行内元素:不独占一行
span a img strong ...
行内元素 可以被包括在 块级元素中,反之,则不可以
block元素特点:
行内元素:a span img 也叫内联单元、内嵌元素等,只能容纳文本或其他内联元素
行内元素特点
属性 display: block 设置成块级元素; display: inline 设置成行内元素 display: inline-block 同时具有块元素和行内元素的属性
display: none 不显示
**float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。**
<!-- block 块元素 inline 行内元素 block-inline 是块元素,但是可以内联,在一行! --> <style> div{ width: 200px; height: 100px; border: 10px solid yellow; } span{ width: 200px; height: 100px; border: 10px solid bisque; display: block; } </style>
<!-- clear: right; 右侧不允许有浮动的元素 clear: left; 左侧不允许有浮动的元素 clear: both; 两侧不允许有浮动的元素 clear: none;--> <style> div{ margin: 0px; padding: 5px; } #img1{ border: 1px #8fa1c7 dashed; display: inline-block; float: left; } #img2{ border: 1px #d4af7a dashed; display: inline-block; float: right; clear: right; } #d1{ border: 1px #455a81 dashed; font-size: 20px; display: inline-block; float: right; } </style>
解决方案:
1、增加父级元素的高度~
#father{ border: 1px #000 soild; height:500px;}
2、增加一个空的div标签,清除浮动
<div class="clear"></div> .clear{ clear:both; margin: 0; padding: 0;}
3、overflow
在父级元素中增加一个 overflow: hidden;
4、父类添加一个伪类: after
#father:after{ content: ''; display: block; clear: both;}
浮动元素后面增加空div
增加,代码中尽量避免空div
设置父元素的高度
简单,元素假设有了固定的高度,就会被限制
overflow
简单,下拉的一些场景避免使用
父类添加一个伪类:after(推荐)
写法稍微复杂一点,但是没有副作用,推荐使用!
<!-- overflow: scroll; 边框不足进行滚动--> <style> div{ margin: 0px; padding: 5px; } #d0{ width: 200px; height: 300px; overflow: scroll; } #img1{ border: 1px #8fa1c7 dashed; display: inline-block; float: left; } #img2{ border: 1px #d4af7a dashed; display: inline-block; float: left; } #d1{ border: 1px #455a81 dashed; font-size: 20px; display: inline-block; float: left; } </style>
display
方法不可以控制
float
浮动起来的话可以脱离标准文档流,所以要解决父级边框塌陷问题~