代码之家 › 专栏 › 技术社区 › Jitendra Vyas

当我们将float赋给父元素以清除float时,为什么float的行为不同于其他选项?

xhtml css

Jitendra Vyas · 技术社区 · 15 年前

http://jsbin.com/inoka4 没有为父元素定义宽度

如果我想把红色的盒子包在集装箱边上。

给予 float 还 <div class="container">
overflow:hidden 或 overflow:auto
<div class="container clearfix">
给予高度 <div class=“container”>
再添加一个html元素(例如另一个 div 或 <br > < 在此处输入代码 and give clear:left or :两者 :没错要素

浮动 请勿更改 <div class=“container”> float:left 或 right 到父框,则收缩整个框和内部框以及。

为什么?

编辑:我的问题不是我应该用哪种方法,问题是为什么浮动缩小宽度

3 回复 | 直到 15 年前

2ndkauboy 15 年前

如果不在容器上使用float,则其宽度设置为100%。如果添加浮动,则只占用所需的空间。在这种情况下,宽度由内部的两个div计算。

所以我的建议是在容器上使用float,并在容器后面的元素上添加一个clear:both。

Matt 15 年前

div#container {
    ...
    overflow: hidden;
}

添加额外的 div

div:after {
    content:....
    ...
}

你的css越来越大,越来越混乱。但它仍然是一个很好的选择(特别是当你需要有东西溢出的盒子)

Stephen 15 年前

你最好的办法是总是清理你的浮动。在用class.right关闭div之后,在用class.container关闭div之前,添加一个新div,如下所示:

<div class="clear"></div>

{clear:both;} 在样式表中。这就是我整天用的东西,很管用。

<div class="container">
    <div class="left"> ... </div>
    <div class="right"> ... </div>
    <div class="clear"></div>
</div>

编辑:很显然,就像你上一个例子一样。:)

推荐文章

Luis Pavez · 在actionListener完成之前更新组件

7 年前

mike · 使用类似封送处理的编码器操纵HTML

7 年前

ajaysheoran2323 · 如何使网站多语言[关闭]

7 年前

Hanlei Price · 标记验证

8 年前

Irum · 获取错误:UI指令无法强制转换到组织。素数面。模型菜单菜单元素

8 年前

curiousToKnow · 如何从xhtml获取文本

8 年前

zinon · XHTML渲染生成空pdf文件

8 年前

saurabh · 如何在一个页面中使用多个ajax日历

8 年前

Gabriel Cardoso · 更新数据后在datatable中更新

8 年前

mac wac · AngularJS的内联模板不适用于XHTML

8 年前