【CSS】H7_浮动

第七章 浮动

1.标准文档流

指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

标准文档流组成：

• 块级元素block
• 内联元素inline
• 内联标签可以包含于块级元素中，成为他的子元素。反之不成立。

2.属性display

块级元素与行内元素的转变：

• display:block;
  可以使行内元素变为块级元素，有宽高并且独占一行
• display:inline;
  可以使块级元素变为行内元素，宽高的设置无效，可以并排一行

3.浮动float

左浮动：float：left

4.边框塌陷(清除浮动clear)

img {
	clear:both;
}
1
2
3
4

5.解决父级边框塌陷的方法

1.浮动元素后面加空div

	.clear{  clear: both;  margin: 0; padding: 0;}

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" />div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />div>
  <div class="layer04">浮动的盒子……div>
  <div class="clear">div>
div>
1
2
3
4
5
6
7
8
9

2.设置父元素的高度height×

	#father {height: 400px; border:1px #000 solid; }

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" />div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />div>
  <div class="layer04">浮动的盒子……div>
div>
1
2
3
4
5
6
7
8

3.父级添加overflow属性×

	#father {overflow: hidden;border:1px #000 solid; }

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" />div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />div>
  <div class="layer04">浮动的盒子……div>
div>
1
2
3
4
5
6
7
8

overflow属性:

4.父级添加伪类after

	.clear:after{
        content: '';          /*在clear类后面添加内容为空*/
        display: block;      /*把添加的内容转化为块元素*/
        clear: both;         /*清除这个元素两边的浮动*/
	}
<div id="father" class="clear">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" />div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />div>
  <div class="layer04">浮动的盒子……div>
div>
1
2
3
4
5
6
7
8
9
10
11

6.inline-block和float的区别×

display:inline-block:

• 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
• 位置方向不可控制，会解析空格
• display可以让元素排在一行，但中间有缝隙。

float:

• 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
• float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

析空格

• display可以让元素排在一行，但中间有缝隙。

float:

• 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
• float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式