为什么要清除浮动？

2024-01-18 10:38 小编

一、理解清除浮动　　

1、为什么要清除浮动　　我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。　　由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。　

　推荐学习：CSS视频教程　　准确地说，并不是清除浮动，而是清除浮动后造成的影响　　

2、清除浮动本质　　清除浮动的本质:主要为了解决父级元素因为子级浮动引起内部高度为0的问题。　　

我们来详细解释下这句话　　再解释下就是在标准流下面一个父p没有设置高度属性,那么它的高度就会被子元素的高度撑开。但是如果这个父p中的子元素是浮动的话，如果父p下面再有　　一个兄弟p，那么这个兄弟p就会遮挡这个父元素。

这个现象也叫浮动溢出。　　

示例　　　　　　<!DOCTYPEhtml> 　　<htmllang="en"> 　　<head> 　　<metacharset="UTF-8"> 　　<title>Document</title> 　　<style> 　　.father{ 　　height:200px; 　　border:1pxsolidred; 　　width:300px 　　} 　　.big{ 　　width:100px; 　　height:100px; 　　background-color:purple; 　　float:left; 　　} 　　.small{ 　　width:80px; 　　height:80px; 　　background-color:blue; 　　float:left; 　　} 　　.footer{ 　　width:400px; 　　height:100px; 　　background-color:pink; 　　} 　　</style> 　　</head> 　　<body> 　　<pclass="father">父p 　　<pclass="big">子p</p> 　　<pclass="small">子p</p> 　　</p> 　　<pclass="footer">兄弟p</p> 　　</body> 　　</html>

Tag：为什么什么

返回首页上一篇：当文档向下滚动时，背景图像也会随之滚动下一篇：CSS的表格边框使用什么属性设置