HTML/CSS: прозрачные плавающие элементы посередине без добавления ненужных тегов

Большинство методов clearfix там включает в себя добавление вещей в самом низу родительского контейнера, и я предпочитаю подход псевдоэлемента больше всего, поскольку он не добавьте ненужные элементы в HTML.HTML/CSS: прозрачные плавающие элементы посередине без добавления ненужных тегов

Однако недавно я обнаружил, что имею дело с контейнером, в котором есть дети, плавающие, но не все. Скажите первым 2 детям, что первые плавают слева, а второй плавает вправо. Мне нужен способ очистить float сразу после второго элемента, поэтому нижеприведенный контент не сжимается между ними. Есть ли способ очистить плавающие элементы посередине, но без добавления элемента clearfix?

Ниже приведен пример:

HTML

<div class="container"> 
    <div class="child"> 
     first child! 
    </div> 
    <div class="child"> 
     second child! 
    </div> 
    <div class="child"> 
     third child! 
    </div>  
</div>

CSS

.container { 
    width: 200px; 
} 

.child:nth-child(1) { 
    float: left; 
    background: yellow; 
} 

.child:nth-child(2) { 
    float: right; 
    background: red; 
} 

.child:nth-child(3) { 
    background: blue; 
    color: white; 
}

Пожалуйста, смотрите это jsfiddle, чтобы увидеть, что я прямо сейчас.

источник

2013-11-20 Xavier_Ex

Просто используйте clear: both; на элементе 3 ^й, таким образом, вы не должны использовать <div style="clear: both;"></div> после плавающих элементов.

.child:nth-child(3) { 
    background: blue; 
    color: white; 
    clear: both; 
}

Demo

Кроме того, если каждый раз, когда вы хотите, чтобы очистить родительский элемент без добавления дополнительного элемента или с помощью overflow: hidden;, который является грязным способом clear поплавков, вы можете вызвать class на родительский элемент, со свойствами ниже

.clear:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

Например

<div class="wrapper clear"> 
    <div class="left_floated_div"></div> 
    <div class="right_floated_div"></div> 
</div>

источник

2013-11-20 17:04:37

Спасибо за ответ, все это большие и очевидные ответы, но я соглашусь с вами, так как у него есть больше информации. И мальчик, о мальчик, я был настолько глуп, чтобы не видеть такого очевидного решения ... Просто используйте все, что приходит после того, как очистит плавучесть! Если оставить в стороне, если у меня есть несколько элементов, плавающих влево и вправо в качестве альтернативы, все равно, чтобы сказать им начать новую строку на каждом поплавке слева, а не помешать их всем в одной строке? Без установки на них ширины. –

@Xavier_Ex У меня также есть ответ [здесь] (http://stackoverflow.com/a/12871734/1542290), который также содержит немного поплавков;) и вы приветствуете ... –

@Xavier_Ex и по вашему вопросу, измените DOM, это хорошая практика для обертывания плавающих элементов в элементе-оболочке и использования класса 'clear', который я уже предложил в своем ответе http: // jsfiddle.net/dJxD4/9/ –

добавление четкого: оба; в третьем ребенке помогает:

.child:nth-child(3) { 
    background: blue; 
    color: white; 
    clear:both; 
}

источник

2013-11-20 17:09:20 Jennift

Тот же ответ г-на Алена – DaniP

Вы должны использовать clear property.

Для примера:

.child:nth-child(3) { 
    clear: both; 
}

jsfiddle В.

источник

2013-11-20 17:10:31

Тот же ответ г-на Алиена – DaniP

HTML/CSS: прозрачные плавающие элементы посередине без добавления ненужных тегов

ответ

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