CSS3——解决父级元素包裹子级元素的方法（伪元素+其他）

利用伪元素清除浮动：

你要解决浮动的为题必须在父级的逻辑的后面加上一个p元素来清除浮动吧，你加完p元素之后破坏结构了，不好，咱相加，又不能加，就用伪元素最合适了吧！

	
		
		
		
	
	
		

			
1
			
2
			
3
		
	

你看看好使吗？

不好使，这个clear元素有点特殊，你想让他生效的话，必须得是块级元素才行，所以我得把after改成块元素，display: block;

你就算有再多的子元素，父级元素也能包裹子元素。

除了清除浮动之外还有没有其他的方法解决？

为什么父级元素包不住他呢？

是因为浮动元素有浮动流，父级元素是块元素，块元素看不到他。那，能看到他的元素是不是有一大堆啊？

所以你给父级加上，display: inline-block;或float: left;

或position: absolute;都可以（有可能你看不出来，不妨把父级的border改成border: 3px solid red;试试）。

现在你看，虽然是父级元素包住子级元素了，但是他的父级没有原来那么宽了。

拓展：

凡是设置了float: left/right;或position: absolute;的，系统会自动从内部把元素给你转换成inline-bolck，你要是变成了行级块元素，宽高就是由内容决定！