должен ли мне подсчитать высоту?

Question

У меня есть один div, который содержит три div для части в коде моего сайта, например:

<div id="container">
<div ></div>
<div id="div1"></div>
<div id="div1"></div></div>

в css:

#container {
margin: 0 auto;
width: 950px;
opacity: .5;
filter: alpha(opacity = 50);
background: #fff;}

#div1 {
width: 100%;
height: 30px;
background: black;
float: left;}

#div2 {
margin:50px 0 50px 0;
width: 950px;
float: left;}

#div3 {
border: 1px solid black;
width: 437px;
height: 532px;
margin: 18px;
float: left;}

, когда я удаляю float:leftсформируйте #container, тогда его высота не будет равна нулю с помощью firefox, но когда я добавлю его обратно, он будет работать правильно, но я не могу отцентрировать мальчика в окне браузера.

как я могу это исправить?

Answer 1

Используйте четкое деление. Это позволит вашему контейнеру адаптироваться к высоте всплывающих элементов. Также у вас были некоторые ошибки в вашем CSS.

"#". это не то, как вы объявляете ID.

Кроме того, идентификатор в вашем HTML должен совпадать с идентификатором в вашем CSS на 100% с учетом регистра. В вашем HTML у вас было id="contianer", а в вашем CSS #container

.clear {
    clear:both;
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0!important
}

#container {
    margin: 0 auto;
    width: 950px;
    opacity: .5;
    filter: alpha(opacity = 50);
    background: #fff;
}
#div1 {
    width: 100%;
    height: 30px;
    background: black;
    float: left;
}

#div2 {
    margin:50px 0 50px 0;
    width: 950px;
    float: left;
}

#div3 {
    border: 1px solid black;
    width: 437px;
    height: 532px;
    margin: 18px;
    float: left;
}

<div id="container">
    <div ></div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div class="clear"></div>
</div>

Answer 2

Вместо использования float: left ... используйте display: inline;

<style>
  #container{margin:0 auto;width:950px;opacity: .5;filter: alpha(opacity = 50);background: #fff;text-align:center;}
  #container div{display:inline;}
</style>
<div id="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
    <div class="div3">Div 3</div>
</div>

Answer 3

Простое объяснение.

Плавающий элемент означает, что вы извлекаете его из обычного потока элементов, а неплавающие элементы не освободят место для него .

Таким образом, когда контейнер имеет только дочерние элементы, которые float ed, контейнер не будет принимать высоту или ширину своих дочерних элементов.

Чтобы сделать это интуитивно понятным, то есть заставить контейнер принимать ширину и высоту его дочерних элементов, вы можете либо float контейнер, либо использовать один из нескольких методов для очистки поплавков .

Мое предпочтительное решение - использовать overflow: hidden на контейнере, если плавающий объект не работает в вашем сценарии. overflow: hidden будет работать в большинстве простых случаев.