CSS-плавающие элементы, сбрасывающие родительский элемент

Я новичок в обоих стеках overflow и веб-разработке, поэтому ваше терпение очень ценится. :)
Все HTML и CSS минус определенные нерелевантные части можно найти в самом низу.CSS-плавающие элементы, сбрасывающие родительский элемент

При стилизации HTML-элементов с помощью CSS, я столкнулся с проблемой, с плавающими элементами и их родительского элемента. Разделы с идентификаторами nav и основные содержатся в пределах div идентификатора содержание. Навигатор содержит неупорядоченный список, который будет служить базовой навигационной панелью, а в главном - абзацы и «мясо» страницы. Я хотел, чтобы абзацы сидели в правой части панели навигации, поэтому я решил поплавать ими обоими.

К этим элементам был применен CSS ниже.

#nav { 
width: 100px; 
float: left; 
} 

#nav ul { 
list-style-type: none; 
padding: 0px; 
} 

#main { 
width: 600px; 
float: right; 
}

Когда я запускаю мой код в браузере, все выглядит нормально. Элементы расположены в надлежащих местах. Однако при более внимательном рассмотрении с помощью инструмента экзаменатор мой родительский элемент с содержимым идентификатора рухнул.

К сожалению, я не могу опубликовать изображение из-за недостатка репутации. Надеюсь, этого достаточно. Я уже искал в Интернете проблему, и это кажется довольно распространенным среди новичков, таких как я. Я прочитал статью о css-tricks.com, и я попытался их методы решения этой проблемы. К сожалению, это было бесполезно. После дальнейших поисков я был в замешательстве. Я хотел бы извиниться за широту этого вопроса. Спасибо всем за ваше время и знания.

Вот HTML ..

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Website</title> 
    <link rel="stylesheet" type="text/css" href="../css/refreshstyle.css"> 
</head> 
<body> 
    <div id="container"> 
     <div id="header"> 
      <h1>My Website</h1> 
     </div> 
     <div id="content"> 
      <div id="nav"> 
       <h3>Navigation</h3> 
       <ul> 
        <li><a class="home" href="">Home</a></li> 
        <li><a class="about" href="">About</a></li> 
        <li><a class="contacts" href="">Contact</a></li> 
       </ul> 
      </div> 
      <div id="main"> 
       <h2>Home Page</h2> 
       <p></p> 
       <p></p> 
       <p></p> 
       <p></p> 

      </div> 
     </div> 
      <div id="footer"> 
       Copyright &copy;2014 
      </div> 
    </div> 
</body>

Ниже CSS ...

body { 
background-image: url('congruent_pentagon.png'); 
} 
#container { 
background-color: white; 
width: 800px; 
margin-left: auto; 
margin-right: auto; 
border: 2px solid #a1a1a1; 
border-radius: 25px; 
} 
#header { 
background-color: #66CCFF; 
color: white; 
text-align: center; 
padding: 10px; 
border-bottom: 2px solid #a1a1a1; 
border-top-right-radius:23px; 
border-top-left-radius: 23px; 
} 
h1, h2, h3 { 
margin:0; 
} 
#nav { 
width: 100px; 
float: left; 
} 
#nav ul { 
list-style-type: none; 
padding: 0px; 
} 
a { 
text-decoration: none; 
color: #66CCFF; 
} 
#nav .home { 
font-weight: bold; 
} 
#main { 
width: 600px; 
float: right; 
} 
#content { 
padding: 10px; 
} 
#footer { 
clear: both; 
background-color: #B1F6CB; 
padding: 10px; 
margin: 0px; 
text-align: right; 
border-top: 2px solid #a1a1a1; 
border-bottom-right-radius: 23px; 
border-bottom-left-radius: 23px; 

}

источник

2014-11-02 John Henry

Какой у вас конкретный HTML? Пожалуйста, не * описывайте * это нам, * покажите * это нам. –

Приношу свои извинения. HTML и CSS теперь находятся в нижней части моего сообщения. –

В этом случае вы можете использовать css clearfi x класс. Определить класс clearfix в вашем CSS:

.clearfix:before, 
.clearfix:after { 
    content: ""; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
} 

.clearfix { 
    zoom: 1; /* ie 6/7 */ 
}

Используйте класс clearfix на родительском элементе, в вашем случае на элементе #content:

<div id="content" class="clearfix"> 
    [...] 
</div>

Найти более подробную информацию о расчистке поплавков в этом blog post.

Btw: welcome on stackoverflow :)

источник

2014-11-02 23:48:30

Большое спасибо за ваш ответ. Через некоторое время я прочитаю сообщение в блоге. Надеюсь, это исправит мою проблему. Спасибо вам большое за ваше время! :) –

CSS-плавающие элементы, сбрасывающие родительский элемент

ответ

Смежные вопросы