初学CSS，有个地方不太懂，关于float的，帮帮忙，谢啦！

NewUserFF 2011-02-25 10:04:24

<html>

    <head>

        <style type = "text/css">

            div {

                border :1px solid black ;

                margin :1em ;

            }   

            .next {

                float :left ;

            }   

        </style>

    </head>

    <body>

        <div>

            <h1>ABC</h1>

            <div class = "next">

                <img src = "1.jpg" />

                <p>ABC</p>

            </div>

        </div>

    </body>

</html>

我的理解是：这个HTML文件中存在两个div，class为next的div是另一个div的子元素，那么理所应当父div就应该包含子div，但是CSS样式中加了float之后发现，这个子div跑到父div的外边去了（大家试一下就知道了），这是为什么？如果我想把这个子div放在父div的里面，应该怎么做，谢啦！

...全文

141 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

IE11下面经常卡到爆 2011-03-02

打赏
举报

[Quote=引用 8 楼 wwtbless 的回复:]
float会脱离文档流，所以才会出现上面的原因。
类似的如:absolute也会脱离，还有其他的，注意看css上的说明，说的很清楚的。
[/Quote]

简单点说，就是这个原因

JJYY0088 2011-03-02

打赏
举报

lz：及时回复帖子是美德

零度空间0520 2011-03-02

打赏
举报

清除浮动

missgd152 2011-03-02

打赏
举报

要么就像他们说的，给父div也设置一个float:left，效果也一样。

missgd152 2011-03-02

打赏
举报

如果你只纯粹是要把子div放到父div中的话，只需这样：
<html>
<head>
<style type = "text/css">
div {
border :1px solid black ;
margin :1em ;
}

</style>
</head>
<body>
<div>
<h1>ABC</h1>
<div class = "next">
<img src = "1.jpg" />
<p>ABC</p>
</div>
</div>
</body>
</html>

子div不需设浮动。

荒牧 2011-03-02

打赏
举报

<html>
<head>
<style type = "text/css">
div {
border :1px solid black ;
margin :1em ;
}
.next {
float :left ;
}
</style>
</head>
<body>
<div style="float:left;">
<h1>ABC</h1>
<div class = "next">
<img src = "1.jpg" />
<p>ABC</p>
</div>
</div>
</body>
</html>

把父无素也设置为浮动就可以了

shenjiao080601 2011-03-01

打赏
举报

父的div 包含子的div就可以了，例如：<div id="fu"><div id="zi"></div></div>
你添加float反而会使其乱跑，因为它相当于以父的为基准，父在左边，子就跑到右边去了。。
你那效果相当于：
<div id="fu" style="flaot:left"></div><div id="子" style="flaot:lright"></div>

wwtbless 2011-02-27

打赏
举报

float会脱离文档流，所以才会出现上面的原因。
类似的如:absolute也会脱离，还有其他的，注意看css上的说明，说的很清楚的。

EvalVsBind 2011-02-26

打赏
举报

<html>

    <head>

        <style type = "text/css">

            .one {

                border :1px solid black ;

                margin :1em ;

				height:auto;

            }   

            .next {

                float :left ;

            }   

        </style>

    </head>

    <body>

        <div class="one">

            <h1>ABC</h1>

            <div class = "next">

                <img src = "1.jpg" />

                <p>ABC</p>

            </div>

            <div style="clear:both" ></div>

        </div>

    </body>

</html>

主要是清除浮动的问题，或者你把最外层div设置高度也可以解决，但不是治根的办法，上面的代码已经为你解决，LZ看看吧

xiaoxiaoo7 2011-02-26

打赏
举报

不知这样可否？

<html>  

<head>  

<style type = "text/css">  

div{  border :1px solid black ; width:900px; overflow:hidden; margin :1em ;  } 

.next {  float :left ; margin:0px auto; border:none  } 

</style>  

</head>  

<body>  

<div>  

<h1>ABC</h1>  

<div class = "next">  

 <img src = "1.jpg" />

                <p>ABC</p>

</div>  

</div>  

</body> 

</html>

happypiggy2010 2011-02-26

打赏
举报

div好像没有边的。里面的子元素可以走到外面。table可以把它限制在一定的区域。

NewUserFF 2011-02-25

打赏
举报

[Quote=引用 1 楼 hongmei85 的回复:]

不知道是不是你想要的
HTML code
<html>
<head>
<style type = "text/css">
div {
border :1px solid black ;
margin :1em ;
}
.next……
[/Quote]
谢谢你的回复。的确，这是我想要的效果，不过这是什么道理？怎么加了一个div就搞定了？有没有办法用原来那两个div就搞定这个问题？

willerce 2011-02-25

打赏
举报

当一个层被float以后，也就是浮动了，浮出正常的文档流，可以理解为 .next这个 div里没有float后的div了。

可以在子div里加个<div class="clearfix"></div>清除浮动
记得style中要写： .clearfix{clear:both}

更多，请用google搜索 css清除浮动

hongmei85 2011-02-25

打赏
举报

不知道是不是你想要的

<html>

    <head>

        <style type = "text/css">

            div {

                border :1px solid black ;

                margin :1em ;

            }   

            .next {

                float :left ;

            }   

        </style>

    </head>

    <body>

        <div>

            <h1>ABC</h1>

            <div class = "next">

                <img src = "1.jpg" />

                <p>ABC</p>

            </div>

						<div style="clear:both;visibility:hidden;"></div>

        </div>

    </body>

</html>