`
wandejun1012
  • 浏览: 2730354 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

float left clear both

    博客分类:
  • CSS
 
阅读更多

要想解决这个问题,很简单,设3个DIV即可解决问题:

 

<body>
	<div style="height: 200px; width: 200px; background-color: red;float: right;">
		我是红色
	</div>
	
	
	<div style="height: 200px; width: 200px;background-color: gray; clear: left; ">
		我是灰色
	</div>
	
	
	<div style="height: 200px; width: 200px;background-color: green;float: right;">
		我是绿色
	</div>


</body>

 1、当某个元素变成float:left时,有2个作用:一是这个元素会浮动在前一个元素的左侧(前提是前一个元素是行内元素);二是此元素变成块内元素,其它元素可以与之在同一行。

 

2、如果前面一个元素是float:left的,那么后面一个元素将强行被拉到上一行,此时如果不想上去,用clear:left即可,这句话的意思是如果左边有浮动元素,将认为左侧是块状元素,即自己换行。 

 

 

 

 

 

 

 

 

 

 

 

讲解css非常专业的一个网站:

refurl:http://zh.html.net/tutorials/css/lesson13.php

 

 http://www.w3school.com.cn/cssref/pr_class_float.asp

 

 

 

分享到:
评论

相关推荐

    css 的 float 与clear

    在CSS世界中,`float`和`clear`是两个非常重要的布局属性,它们在网页设计中扮演着不可或缺的角色。这两个属性对于理解盒模型以及创建复杂的网页布局至关重要。在这篇文章中,我们将深入探讨`float`和`clear`的概念...

    css float left布局换行不正常问题的解决

    clear: both;}。 2. 盒模型的理解:文档中提到了box-sizing属性,并设置为border-box。这是非常重要的,因为默认情况下,CSS中的盒模型是按照content-box来计算元素宽度和高度的,这意味着设置的宽度和高度只包括...

    CSS中float和clear各是什么意思有哪些区别

    禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.上面提到的行也可能是多行组成的一个块,不...

    CSS浮动属性Float详解 什么是CSS Float?

    Clear 属性有四个可能的值:both、left、right 和 none。其中,both 是最常用的值,可以清除左右两边的浮动。 此外,Float 属性还可能引发塌陷问题。如果父元素只包含浮动元素,那么它的高度就会塌缩为零。如果父...

    css中float left与float right的使用说明

    为了解决这个问题,通常会添加一个清浮动的元素,例如`&lt;div style="clear:both;height:0px;"&gt;&lt;/div&gt;`,这可以恢复父元素的高度计算。 总的来说,`float`属性是CSS布局中的一个基础工具,但它的使用需要谨慎,因为它...

    前端学习clear清除

    与`clear:left`类似,`clear:right`的作用是确保新元素不与右侧的浮动元素发生重叠。具体实现如下: ```html ;"&gt; ; height: 100px; border: 1px solid red; float: left;"&gt;A元素 ; height: 200px; border: 1px ...

    clear:both后margin-top不起作用其他左右下都起作用

    当一个元素设置了`float:left`或`float:right`时,它会脱离常规文档流,而`clear:both`则用于清除这种浮动,使后续元素不再受到前面浮动元素的影响。然而,`clear:both`对`margin-top`的特殊表现有时会让开发者感到...

    CSS display:inline和float:left两者区别探讨

    4. **清除浮动**:内联元素不需要清除浮动,但浮动元素可能会导致父元素高度塌陷,需要使用 `clear:both` 或 `overflow:hidden` 来解决。 在示例代码中,展示了`display:inline` 和 `float:left` 的应用。可以看到...

    float讲解ppt

    3. **清除浮动**:由于`float`的影响,可能会出现父元素高度塌陷的问题,为此需要使用`clear`属性来清除浮动,如`clear:both`,`clear:left`,`clear:right`或`clear: both;`。 **内容二:页面布局与float** 1. **...

    CSS-float详解.pdf

    ### CSS Float 属性详解 #### 一、引言 ...理解`float`属性的基本原理及其如何与`clear`属性配合使用,对于实现灵活多样的页面布局至关重要。通过本文档的学习,希望能帮助大家更好地掌握这一核心技能。

    css浮动(float/clear)使用讲解

    浮动主要有两种类型:左浮动(float:left;)和右浮动(float:right;)。左浮动元素会尽可能向左移动,直到它的左边接触到包含它的边框或者另一个浮动元素的右边。右浮动元素则相反,会尽可能向右移动,直到它的右边...

    css浮动(float,clear)通俗讲解经验分享

    在CSS中,浮动分为两种类型:`float:left;` 和 `float:right;`。顾名思义,`left` 浮动会让元素向左移动,直到碰到父元素的左边界或者另一个浮动元素;`right` 浮动则相反,元素会向右移动直到碰到父元素的右边界...

    浮动float深入了解

    2. `clear`属性:直接在后续元素上设置`clear`属性,比如`clear: both`,使其不跟随浮动元素。 3. `overflow`属性:将父元素的`overflow`设置为`hidden`或`auto`,也可以触发块级格式化上下文,从而解决高度塌陷。 ...

    float样式对DIV的影响

    `clear:both`会确保元素下方没有浮动元素,从而保持正常的布局。 然而,随着CSS新布局模型(如Flexbox和Grid)的出现,`float`的使用逐渐减少,特别是在复杂的响应式设计中。这些新模型提供了更强大、更易于控制的...

    Float(浮动)导致的父容器背景不显示的解决方法

    当一个元素设置了`float:left`或`float:right`时,它会从文档流中抽出,周围的元素会围绕它排列。这种情况下,如果父元素没有设置高度(`height`),或者内容不足以填满整个父元素,那么父元素的高度将不会自动扩展...

    清除浮动clear:both的应用详解

    当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;...

    css float文字的显示问题(兼容性)

    当一个元素被设置为`float:left`或`float:right`时,它会从当前的流中移出,向左或向右浮动,同时允许其他内容围绕它流动。这种特性在早期的网页设计中常用来实现图文混排。 然而,`float`带来的问题之一是“浮动...

Global site tag (gtag.js) - Google Analytics