В чем разница Clear:both и float:none

ekklesiast · December 2, 2008

Скажите, в чем разница между

Clear:both и float:none

homm · December 2, 2008

Разница примерно как между теплым и мягким.

ekklesiast · December 2, 2008

Clear:both Означает, что ни слева нет обтекающих блоков,

А float:none означает, что данный блок НЕ обтекается ни справа ни слева.

Ведь если данный блок не обтекается ни справа, ни слева, то также не может быть каких-нибудь блоков.

Вот ЭТо я и не могу понять.

Или я в чем-то ошибаюсь?

homm · December 2, 2008

Clear:both означает, что элемент, к котрому бедт применено это свойство будет перенесен вниз под все плавающие блоки в текущем потоке.

Searcher · December 3, 2008

Clear:both Означает, что ни слева нет обтекающих блоков,
А float:none означает, что данный блок НЕ обтекается ни справа ни слева.

ekklesiast, интересно, где вы прочитали эту ерунду?

определение с этого сайта:

Clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью атрибута float, то атрибут clear отменяет его действие для указанных сторон.

Float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение атрибута float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

snug · April 5, 2010

Скажите пожалуйтса зачем тут 2 блока перенесли вниз?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
<style type="text/css">
#s-all {width:100%;border: 1px solid brown;}
#s-col1 {float:left; width:200px; border: 1px solid red;}
#s-col2 {float:right; width:200px; border: 1px solid blue;}
#s-content {margin:0 210px 0 210px; border: 1px solid violet;}
</style>
</head>

<body>
<div id="s-all">
	<div id="s-header">шапка</div>
	<div style="clear:both;">
	<div id="s-col1">левое меню</div>
	<div id="s-col2">правое меню</div>
	<div id="s-content">содержание</div>
	<div style="clear:both;">
	<div id="footer">дно</div>
</div>
</body>
</html>

А именно блок перед левым меню и содержимым, какую функцию исполняют тут

<div style="clear:both;">

?

s0rr0w · April 5, 2010

Научитесь, для начала, закрывать теги.

psywalker · April 5, 2010

Скажите пожалуйтса зачем тут 2 блока перенесли вниз?

За этим самым http://stepbystep.htmlbook.ru/

Searcher · April 5, 2010

1. код с ошибками, изучайте основы.

2. <div style="clear:both;"></div> позволяет разместить следующее за ним зодержимое ниже плавающих блоков.

3. если используете чужой код, чтобы понять что и как работает практикуйтесь, убирайте непонятные фрагменты кода и смотрите, что меняется.

snug · April 6, 2010

2. <div style="clear:both;"></div> позволяет разместить следующее за ним зодержимое ниже плавающих блоков.

Спасибо.

psywalker "За этим самым http://stepbystep.htmlbook.ru/", А поточнее?

Searcher · April 6, 2010

psywalker "За этим самым http://stepbystep.htmlbook.ru/", А поточнее?

psywalker имел ввиду тоже что и я: изучайте основы, начинайте с html и css

boooze · January 27, 2011

определение с этого сайта:
Clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью атрибута float, то атрибут clear отменяет его действие для указанных сторон.

А можно ли еще отступ прибавить от блока сверху?margin-top не работает

Serlutin · January 27, 2011

А можно ли еще отступ прибавить от блока сверху?margin-top не работает

Конечно можно сверху отступ. Если margin-top не работает, то советую обновить ie2, хотя бы до ie8.

Как, у вас не ie2? Тогда сюда нужно код выложить, а без кода подсказывать, это как лечить по фотографии.

boooze · January 27, 2011

Конечно можно сверху отступ. Если margin-top не работает, то советую обновить ie2, хотя бы до ie8.
Как, у вас не ie2? Тогда сюда нужно код выложить, а без кода подсказывать, это как лечить по фотографии.

css

#footer
{
	width:801px;
	height:52px;
	background-image:url(../images/footer.jpg);
	background-repeat:no-repeat;
	margin-left:auto;
	margin-right:auto;
	clear:both;
	margin-top:100px;
}

html


<div id="main">
<div id="nav">
<i class="nav_top"></i>
<p class="nav_txt">

</p>
<i class="nav_bottom"></i> 

</div>
<div id="content">
<i class="con_top"></i>
<p class="con_txt">{info}{content}</p>
<i class="con_bottom"></i>
</div>

</div>
<div id="footer"><p class="foot">@хуйли нам то але але але<p></div>

На margin-top никакой реакции.

Serlutin · January 27, 2011

У меня всё нормально. Сверху отступ в 100px есть. Если не верите, могу даже скрин сделать.

boooze · January 27, 2011

У меня всё нормально. Сверху отступ в 100px есть. Если не верите, могу даже скрин сделать.

o_O Да верю ,почему нет...o_O

Sign In

В чем разница Clear:both и float:none

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information