float и overflow

vikusik · June 4, 2011

Всем привет!

Есть код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title></title>
<style>
.block {
	background-color: #CCC;
}
.float {
	float: left;
	width: 50px;
	height: 50px;
	background-color: #0F0;
}
</style>
</head> 
<body> 
	<div class="block">
		<div class="float"></div>
		<p>текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
</body> 
</html>

Ситуация такая: чтобы div.block захватил и div.float, нужно назначить ему overflow: hidden. Но что делать, если внутри будут например абсолютно позиционированные элементы, выходящие за его пределы, тогда они обрежутся. Как можно в этом случае заменить overflow? Если подумать, то приходит только min-heigh, но мне нужно, чтобы div.block закначивался там, где заканчиватся div.float, так как высота div.float неизвестна, разная. Подскажите, а

psywalker · June 16, 2012

clear и overflow так и нужны вместе, или чего-то одного будет достаточно?

clear нужен обязательно, а overflow нет. Это скорее была некая перестраховка из-за символа ".", который находится в свойстве content.

почему это будет работать, если мы добавляем этот афтер к wrap? разве это надо поместить не внутрь в самый низ?

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

и для чего нужны две последние строчки в стилях - зачем и высоту и ещё минимальную высоту ставить?

Точка не нужна (просто опять же, неопытная перестраховка), а вот на счёт этих вещей:

* html .wrap{ height: 1%; }
*+html .wrap { min-height: 1%;}

Это для IE6-7, сейчас уже совершенно неактуально. Можешь забыть) А, если уж очень хочется, то ставь zoom: 1 и не прогадаешь) Это врубит haslyout в этих ужасных браузерах.

и ещё, вроде можно ведь сделать контент пустым, если написать '', или нет?

Да, всё верно. Точка там нафиг не нужна.

Вот, недавно был изобретён один классный метод, который лишён всех тех косяков, которые были в прежних clearfix-ах. Заодно и статейку прочитай, будет полезно

Peekit · June 16, 2012

спасибо, оперативно)

Sign In

float и overflow

Question

vikusik

Link to comment

Share on other sites

27 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Peekit

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information