А как вы выполняте Clearing?

TonKhaO · January 12, 2010

Всем людям верстающих в дивах конечно всегда после того как зафлоачены элементы выполнять клиринг чтобы отменять обтекание ниже следующих элементов, я лично ставлю после отфлоаченного элемента пустой див у которого в классе прописано cleat: both (конечно возможно это не совсем правильно). Хотелось бы узнать а как вы это делаете

Вот как я это делаю

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
#left {
	   float: left;
	   display: inline;
	   background: silver;
	   width: 100px;
	   height: 100px;
	   margin: 1px;
}
#right {

		background: maroon;
}
#afterDiv {
		   background: green;
}

.clear {clear: both;}

</style>

</head>

<body>

<div id="left">left</div>
<div id="right">right text</div>

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

<div id="afterDiv">after</div>

</body>
</html>

Edited January 12, 2010 by TonKhaO

TonKhaO · January 15, 2010

2Justnewone и psywalker, господа, правильно ли я понял методу правильного слеаринга с помощью overflow посмотрите плз код, так нужно?

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">



#wrapper {

		  overflow: hidden;
		  zoom: 1;

}



#left {
	   float: left;
	   display: inline;
	   background: silver;
	   width: 100px;
	   height: 100px;
	   margin: 1px;
}
#right {

		background: maroon;
}




#afterDiv {
		   background: green;
}

.clear {clear: both;}

</style>

</head>

<body>

<div id="wrapper">

	 <div id="left">left</div>

	 <div id="right">right text</div>

</div>

<div id="afterDiv">after</div>

</body>
</html>

Edited January 15, 2010 by TonKhaO

Justnewone · January 15, 2010

Ты крут! =)

но для полноты картины

#right {overflow:hidden;} или #right {margin-left:100px}, ибо #right и #left сейчас пересекаются, можно дать одному бекграунд а второму бордер и убедиться. Хотя, это если не надо чтоб они пересекались, а так все хорошо.

TonKhaO · January 15, 2010

Ты крут! =)

льстишь

но одно хорошо - что учусь

слушай я все таки правильно понял что ты делаешь немного по другому, ты не ставишь overflow: hidden родителю а просто ставишь родителю clear: both ? хмм, тогда вот вопрос, какой способ более уриверсален и надежен, overflow или же clear: both у родителя ?

Justnewone · January 15, 2010

льстишь
но одно хорошо - что учусь
слушай я все таки правильно понял что ты делаешь немного по другому, ты не ставишь overflow: hidden родителю а просто ставишь родителю clear: both ? хмм, тогда вот вопрос, какой способ более уриверсален и надежен, overflow или же clear: both у родителя ?

не не, клеар бывает разный.

Например, я могу разлечить 2 типовые задачи.

1. Отбить некий объект под отфлоаченный по тексту объект. тогда я добавляю class="clear"

2. Родитель должен чувствовать высоту отфлоаченного потомка - этот как раз тот способ что ты осознал.

TonKhaO · January 15, 2010

не не, клеар бывает разный.
1. Отбить некий объект под отфлоаченный по тексту объект. тогда я добавляю class="clear"

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">



#wrapper {

		  clear: both;
		  display: block;

}



#left {
	   float: left;
	   display: inline;
	   background: silver;
	   width: 100px;
	   height: 200px;
	   margin: 1px;
}
#right {

		background: maroon;
}




#afterDiv {
		   background: green;
}


</style>

</head>

<body>

<div id="wrapper">

	 <div id="left">left</div>

	 <div id="right">right text</div>

</div>

<div id="afterDiv">after</div>

</body>
</html>

Searcher · January 15, 2010

Зачем clear: both для #wrapper?

Зачем display: block #wrapper?

overflow:hidden для #wrapper нужно только

TonKhaO · January 15, 2010

Зачем clear: both для #wrapper?
Зачем display: block #wrapper?
overflow:hidden для #wrapper нужно только

я это прекрасно понимаю что не нужно поэтому и спросил, просто Justnewone

написал в начале

"добавляю класс clear, в котором display:block и clear:both"

и этот момент я не понял, как и

"1. Отбить некий объект под отфлоаченный по тексту объект. тогда я добавляю class="clear"

приведите пример если можно дабы понять эту ситуацию

Edited January 15, 2010 by TonKhaO

Justnewone · January 15, 2010

"1. Отбить некий объект под отфлоаченный по тексту объект. тогда я добавляю class="clear"
приведите пример если можно дабы понять эту ситуацию

Картинка в тексте. Текст ее обтекает, все хорошо. Но, например, при какой-то ширине ее обтекает заголовок, если мне кажется некрасивым, я заголовку даю класс.

.clear {

clear: both;

display: block;

}

display: block; добавляется только для того, если элемент, допустим, строчный.

TonKhaO · January 15, 2010

Картинка в тексте. Текст ее обтекает, все хорошо. Но, например, при какой-то ширине ее обтекает заголовок, если мне кажется некрасивым, я заголовку даю класс.
.clear {
clear: both;
display: block;
}
display: block; добавляется только для того, если элемент, допустим, строчный.

ааа все понял ок спасибо за разьяснение, теперь буду пользовать 2 фичи которые выучил, гы

Sign In

А как вы выполняте Clearing?

Question

TonKhaO

Link to comment

Share on other sites

34 answers to this question

Recommended Posts

TonKhaO

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

TonKhaO

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

TonKhaO

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

TonKhaO

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

TonKhaO

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information