css 浮动 理解Float的含义

面布局有两种方式 1）浮动Float 2）定位Position 今天就来一个小小的练习，让大家理解Float的含义 【例子】 要求： 1）两个方块，一个红色#900，一个蓝色#009； 2）红色方块宽度和高度均为200像素，蓝色方块 宽度为300像素，高度为200像素； 3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素； 页面效果如下： 源代码： 例子2.rar 大家应该注意到了，虽然红色方块的宽度并不是100%，但是蓝色并未和红色处于同一行，这就是块状元素比较“霸道”的一点，（即使块状元素的宽度不是100%，它也不允许其他元素和他同在一行） CSS中的浮动（Float）是网页布局中至关重要的概念，它主要用以解决传统块级元素排列的问题，使得元素能够按照预期的方式在一行内排列。在本例中，我们通过两个方块（一个红色，一个蓝色）的布局练习来深入理解浮动的含义。 我们有传统的两种网页布局方式：浮动（Float）和定位（Position）。浮动主要用于实现元素的水平排列，而定位则用于精确控制元素的位置。在浮动的例子中，我们有一个红色方块和一个蓝色方块。红色方块的宽高都是200像素，蓝色方块的宽度是300像素，高度是200像素。由于块级元素的特性，即使红色方块的宽度不是100%，蓝色方块也会被推到下一行显示，这就是块级元素的“霸道”之处。 为了解决这个问题，引入了CSS的`float`属性。在红色方块的CSS中设置`float:left;`，这样红色方块就会向左浮动，允许蓝色方块与它在同一行。然而，这个解决方案在不同浏览器中可能有不同的表现，例如在IE6中工作正常，但在Firefox（FF）中可能会出现重叠。这是因为FF中，如果前一个元素浮动了，后一个元素可能会与其重叠。解决这个问题的方法是在蓝色方块的CSS中同样设置`float:left;`，确保两个方块都能正确地并排显示。 这里还提到了一个IE6特有的问题，即双倍边距bug。当满足三个条件时，块级元素在IE6中会显示出双倍的左外边距：一是该元素为块级元素，二是左侧浮动，三是设置了左外边距。解决这个bug的方法是在相应元素的CSS中添加`display:inline;`，这样就能使IE6的行为与标准浏览器一致。 浮动还会涉及到浮动清除（Clear），这是防止元素受到前面浮动元素影响的重要技术。当不希望元素受之前浮动元素的影响时，可以使用`clear:both;`来清除浮动。这将在下一次讲解中详细介绍。 总结起来，浮动（Float）是CSS布局中的一种基础技术，用于处理元素的水平排列和消除块级元素的默认行为。理解浮动以及如何处理浮动带来的问题，对于创建响应式和跨浏览器兼容的网页至关重要。在实际应用中，我们还需要关注浏览器的差异，使用适当的技巧来修复潜在的兼容性问题。通过不断学习和实践，我们可以更熟练地掌握CSS浮动的运用。